From 09c4e2c17ed4441e4e0c4b0eacce322d589aeefd Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 01:09:44 +0530
Subject: [PATCH 01/11] feat: migrate to React 19

---
 .../accordion/accordion-content.tsx           |  18 +--
 .../components/accordion/accordion-item.tsx   |  13 +-
 .../components/accordion/accordion-root.tsx   |  98 ++++++-------
 .../accordion/accordion-trigger.tsx           |  13 +-
 .../alert-dialog/alert-dialog-content.tsx     |  80 +++++------
 .../alert-dialog/alert-dialog-misc.tsx        |  68 ++++-----
 .../raystack/components/amount/amount.tsx     | 132 +++++++++---------
 .../announcement-bar/announcement-bar.tsx     |  10 +-
 .../raystack/components/avatar/avatar.tsx     | 117 ++++++++--------
 packages/raystack/components/badge/badge.tsx  |  52 +++----
 .../raystack/components/box/box.module.css    |   3 -
 packages/raystack/components/box/box.tsx      |  24 +---
 .../components/breadcrumb/breadcrumb-item.tsx | 127 ++++++++---------
 .../components/breadcrumb/breadcrumb-misc.tsx |  80 ++++-------
 .../components/breadcrumb/breadcrumb-root.tsx |  33 +++--
 .../raystack/components/button/button.tsx     | 123 ++++++++--------
 .../raystack/components/calendar/calendar.tsx |   2 +
 .../components/calendar/date-picker.tsx       |  14 +-
 .../components/calendar/range-picker.tsx      |   8 +-
 19 files changed, 468 insertions(+), 547 deletions(-)
 delete mode 100644 packages/raystack/components/box/box.module.css

diff --git a/packages/raystack/components/accordion/accordion-content.tsx b/packages/raystack/components/accordion/accordion-content.tsx
index 5dc7183bc..088048717 100644
--- a/packages/raystack/components/accordion/accordion-content.tsx
+++ b/packages/raystack/components/accordion/accordion-content.tsx
@@ -2,22 +2,18 @@
 
 import { Accordion as AccordionPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './accordion.module.css';
 
-export const AccordionContent = forwardRef<
-  ElementRef<typeof AccordionPrimitive.Panel>,
-  AccordionPrimitive.Panel.Props
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Panel
-    ref={ref}
-    className={styles['accordion-content']}
-    {...props}
-  >
+export const AccordionContent = ({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) => (
+  <AccordionPrimitive.Panel className={styles['accordion-content']} {...props}>
     <div className={cx(styles['accordion-content-inner'], className)}>
       {children}
     </div>
   </AccordionPrimitive.Panel>
-));
+);
 
 AccordionContent.displayName = 'Accordion.Content';
diff --git a/packages/raystack/components/accordion/accordion-item.tsx b/packages/raystack/components/accordion/accordion-item.tsx
index 3b487fa5c..0b937b8c7 100644
--- a/packages/raystack/components/accordion/accordion-item.tsx
+++ b/packages/raystack/components/accordion/accordion-item.tsx
@@ -2,20 +2,19 @@
 
 import { Accordion as AccordionPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './accordion.module.css';
 
-export const AccordionItem = forwardRef<
-  ElementRef<typeof AccordionPrimitive.Item>,
-  AccordionPrimitive.Item.Props
->(({ className, children, ...props }, ref) => (
+export const AccordionItem = ({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Item.Props) => (
   <AccordionPrimitive.Item
-    ref={ref}
     className={cx(styles['accordion-item'], className)}
     {...props}
   >
     {children}
   </AccordionPrimitive.Item>
-));
+);
 
 AccordionItem.displayName = 'Accordion.Item';
diff --git a/packages/raystack/components/accordion/accordion-root.tsx b/packages/raystack/components/accordion/accordion-root.tsx
index be7030010..6544de9cd 100644
--- a/packages/raystack/components/accordion/accordion-root.tsx
+++ b/packages/raystack/components/accordion/accordion-root.tsx
@@ -2,7 +2,6 @@
 
 import { Accordion as AccordionPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './accordion.module.css';
 
 type AccordionSingleProps = Omit<
@@ -27,61 +26,52 @@ type AccordionMultipleProps = Omit<
 
 export type AccordionRootProps = AccordionSingleProps | AccordionMultipleProps;
 
-export const AccordionRoot = forwardRef<
-  ElementRef<typeof AccordionPrimitive.Root>,
-  AccordionRootProps
->(
-  (
-    {
-      className,
-      multiple = false,
-      value,
-      defaultValue,
-      onValueChange,
-      ...rest
-    },
-    ref
-  ) => {
-    // Convert value to array format for Base UI
-    const baseValue = value
-      ? Array.isArray(value)
-        ? value
-        : [value]
-      : undefined;
+export const AccordionRoot = ({
+  className,
+  multiple = false,
+  value,
+  defaultValue,
+  onValueChange,
+  ...rest
+}: AccordionRootProps) => {
+  // Convert value to array format for Base UI
+  const baseValue = value
+    ? Array.isArray(value)
+      ? value
+      : [value]
+    : undefined;
 
-    const baseDefaultValue = defaultValue
-      ? Array.isArray(defaultValue)
-        ? defaultValue
-        : [defaultValue]
-      : undefined;
+  const baseDefaultValue = defaultValue
+    ? Array.isArray(defaultValue)
+      ? defaultValue
+      : [defaultValue]
+    : undefined;
 
-    const handleValueChange = (
-      newValue: string[],
-      eventDetails: AccordionPrimitive.Root.ChangeEventDetails
-    ) => {
-      if (onValueChange) {
-        if (multiple) {
-          (onValueChange as (value: string[]) => void)(newValue);
-        } else {
-          (onValueChange as (value: string | undefined) => void)(
-            newValue[0] || undefined
-          );
-        }
+  const handleValueChange = (
+    newValue: string[],
+    eventDetails: AccordionPrimitive.Root.ChangeEventDetails
+  ) => {
+    if (onValueChange) {
+      if (multiple) {
+        (onValueChange as (value: string[]) => void)(newValue);
+      } else {
+        (onValueChange as (value: string | undefined) => void)(
+          newValue[0] || undefined
+        );
       }
-    };
+    }
+  };
 
-    return (
-      <AccordionPrimitive.Root
-        ref={ref}
-        className={cx(styles.accordion, className)}
-        multiple={multiple}
-        value={baseValue}
-        defaultValue={baseDefaultValue}
-        onValueChange={handleValueChange}
-        {...rest}
-      />
-    );
-  }
-);
+  return (
+    <AccordionPrimitive.Root
+      className={cx(styles.accordion, className)}
+      multiple={multiple}
+      value={baseValue}
+      defaultValue={baseDefaultValue}
+      onValueChange={handleValueChange}
+      {...rest}
+    />
+  );
+};
 
-AccordionRoot.displayName = 'Accordion.Root';
+AccordionRoot.displayName = 'Accordion';
diff --git a/packages/raystack/components/accordion/accordion-trigger.tsx b/packages/raystack/components/accordion/accordion-trigger.tsx
index ef50a0ad3..c52735e4d 100644
--- a/packages/raystack/components/accordion/accordion-trigger.tsx
+++ b/packages/raystack/components/accordion/accordion-trigger.tsx
@@ -3,16 +3,15 @@
 import { Accordion as AccordionPrimitive } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './accordion.module.css';
 
-export const AccordionTrigger = forwardRef<
-  ElementRef<typeof AccordionPrimitive.Trigger>,
-  AccordionPrimitive.Trigger.Props
->(({ className, children, ...props }, ref) => (
+export const AccordionTrigger = ({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) => (
   <AccordionPrimitive.Header className={styles['accordion-header']}>
     <AccordionPrimitive.Trigger
-      ref={ref}
       className={cx(styles['accordion-trigger'], className)}
       {...props}
     >
@@ -20,6 +19,6 @@ export const AccordionTrigger = forwardRef<
       <ChevronDownIcon className={styles['accordion-icon']} />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-));
+);
 
 AccordionTrigger.displayName = 'Accordion.Trigger';
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
index e60acfdda..824cbb154 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
@@ -2,7 +2,6 @@
 
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from '../dialog/dialog.module.css';
 import { CloseButton } from './alert-dialog-misc';
 
@@ -18,51 +17,42 @@ export interface AlertDialogContentProps
   showNestedAnimation?: boolean;
 }
 
-export const AlertDialogContent = forwardRef<
-  ElementRef<typeof AlertDialogPrimitive.Popup>,
-  AlertDialogContentProps
->(
-  (
-    {
-      className,
-      children,
-      showCloseButton = true,
-      overlay,
-      width,
-      style,
-      showNestedAnimation = true,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <AlertDialogPrimitive.Portal>
-        <AlertDialogPrimitive.Backdrop
-          {...overlay}
+export const AlertDialogContent = ({
+  className,
+  children,
+  showCloseButton = true,
+  overlay,
+  width,
+  style,
+  showNestedAnimation = true,
+  ...props
+}: AlertDialogContentProps) => {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Backdrop
+        {...overlay}
+        className={cx(
+          styles.dialogOverlay,
+          overlay?.blur && styles.overlayBlur,
+          overlay?.className
+        )}
+      />
+      <AlertDialogPrimitive.Viewport className={styles.viewport}>
+        <AlertDialogPrimitive.Popup
           className={cx(
-            styles.dialogOverlay,
-            overlay?.blur && styles.overlayBlur,
-            overlay?.className
+            styles.dialogContent,
+            showNestedAnimation && styles.showNestedAnimation,
+            className
           )}
-        />
-        <AlertDialogPrimitive.Viewport className={styles.viewport}>
-          <AlertDialogPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.dialogContent,
-              showNestedAnimation && styles.showNestedAnimation,
-              className
-            )}
-            style={{ width, ...style }}
-            {...props}
-          >
-            {children}
-            {showCloseButton && <CloseButton className={styles.closeButton} />}
-          </AlertDialogPrimitive.Popup>
-        </AlertDialogPrimitive.Viewport>
-      </AlertDialogPrimitive.Portal>
-    );
-  }
-);
+          style={{ width, ...style }}
+          {...props}
+        >
+          {children}
+          {showCloseButton && <CloseButton className={styles.closeButton} />}
+        </AlertDialogPrimitive.Popup>
+      </AlertDialogPrimitive.Viewport>
+    </AlertDialogPrimitive.Portal>
+  );
+};
 
 AlertDialogContent.displayName = 'AlertDialog.Content';
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
index f0fe92e4b..d242a196f 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
@@ -3,62 +3,58 @@
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+import { type ComponentProps } from 'react';
 import styles from '../dialog/dialog.module.css';
 import { Flex } from '../flex';
 
-export const AlertDialogHeader = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
+export const AlertDialogHeader = ({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) => (
   <Flex
     justify='between'
     align='center'
     className={cx(styles.header, className)}
-    ref={ref}
     {...props}
   />
-));
+);
 
 AlertDialogHeader.displayName = 'AlertDialog.Header';
 
-export const AlertDialogFooter = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
+export const AlertDialogFooter = ({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) => (
   <Flex
     gap={5}
     justify='end'
     className={cx(styles.footer, className)}
-    ref={ref}
     {...props}
   />
-));
+);
 
 AlertDialogFooter.displayName = 'AlertDialog.Footer';
 
-export const AlertDialogBody = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
+export const AlertDialogBody = ({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) => (
   <Flex
     direction='column'
     gap={3}
     className={cx(styles.body, className)}
-    ref={ref}
     {...props}
   />
-));
+);
 
 AlertDialogBody.displayName = 'AlertDialog.Body';
 
-export const CloseButton = forwardRef<
-  ElementRef<typeof AlertDialogPrimitive.Close>,
-  AlertDialogPrimitive.Close.Props
->(({ className, ...props }, ref) => {
+export const CloseButton = ({
+  className,
+  ...props
+}: AlertDialogPrimitive.Close.Props) => {
   return (
     <AlertDialogPrimitive.Close
-      ref={ref}
       className={cx(styles.close, className)}
       aria-label='Close dialog'
       {...props}
@@ -66,36 +62,34 @@ export const CloseButton = forwardRef<
       <Cross1Icon aria-hidden='true' />
     </AlertDialogPrimitive.Close>
   );
-});
+};
 
 CloseButton.displayName = 'AlertDialog.CloseButton';
 
-export const AlertDialogTitle = forwardRef<
-  ElementRef<typeof AlertDialogPrimitive.Title>,
-  AlertDialogPrimitive.Title.Props
->(({ className, ...props }, ref) => {
+export const AlertDialogTitle = ({
+  className,
+  ...props
+}: AlertDialogPrimitive.Title.Props) => {
   return (
     <AlertDialogPrimitive.Title
-      ref={ref}
       className={cx(styles.title, className)}
       {...props}
     />
   );
-});
+};
 
 AlertDialogTitle.displayName = 'AlertDialog.Title';
 
-export const AlertDialogDescription = forwardRef<
-  ElementRef<typeof AlertDialogPrimitive.Description>,
-  AlertDialogPrimitive.Description.Props
->(({ className, ...props }, ref) => {
+export const AlertDialogDescription = ({
+  className,
+  ...props
+}: AlertDialogPrimitive.Description.Props) => {
   return (
     <AlertDialogPrimitive.Description
-      ref={ref}
       className={cx(styles.description, className)}
       {...props}
     />
   );
-});
+};
 
 AlertDialogDescription.displayName = 'AlertDialog.Description';
diff --git a/packages/raystack/components/amount/amount.tsx b/packages/raystack/components/amount/amount.tsx
index 2f6964e1c..3815e737e 100644
--- a/packages/raystack/components/amount/amount.tsx
+++ b/packages/raystack/components/amount/amount.tsx
@@ -1,6 +1,6 @@
-import { forwardRef } from 'react';
+import { type ComponentProps } from 'react';
 
-export interface AmountProps {
+export interface AmountProps extends ComponentProps<'span'> {
   /**
    * The monetary value to display
    * For large numbers (> 2^53), pass the value as string to maintain precision
@@ -141,74 +141,68 @@ function isValidCurrency(currency: string): boolean {
  * </Text>
  * ```
  */
-export const Amount = forwardRef<HTMLSpanElement, AmountProps>(
-  (
-    {
-      value = 0,
-      currency = 'USD',
-      locale = 'en-US',
-      hideDecimals = false,
-      currencyDisplay = 'symbol',
-      minimumFractionDigits,
-      maximumFractionDigits,
-      groupDigits = true,
-      valueInMinorUnits = true
-    },
-    ref
-  ) => {
-    try {
-      if (
-        typeof value === 'number' &&
-        Math.abs(value) > Number.MAX_SAFE_INTEGER
-      ) {
-        console.warn(
-          `Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +
-            'For large numbers, pass the value as a string to maintain precision.'
-        );
-      }
-
-      const validCurrency = isValidCurrency(currency) ? currency : 'USD';
-      if (validCurrency !== currency) {
-        console.warn(
-          `Invalid currency code: ${currency}. Falling back to USD.`
-        );
-      }
-
-      const decimals = getCurrencyDecimals(validCurrency);
-
-      // Handle minor units - use string manipulation for strings and Math.pow for numbers
-      const baseValue =
-        valueInMinorUnits && decimals > 0
-          ? typeof value === 'string'
-            ? value.slice(0, -decimals) + '.' + value.slice(-decimals)
-            : value / Math.pow(10, decimals)
-          : value;
-
-      // Remove decimals if hideDecimals is true - handle string and number separately
-      // Note: Not all numbers passed is converted to string as methods like Math.trunc
-      // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).
-      const finalBaseValue = hideDecimals
-        ? typeof baseValue === 'string'
-          ? baseValue.split('.')[0]
-          : Math.trunc(baseValue)
-        : baseValue;
-
-      const formattedValue = new Intl.NumberFormat(locale, {
-        style: 'currency' as const,
-        currency: validCurrency.toUpperCase(),
-        currencyDisplay,
-        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
-        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
-        useGrouping: groupDigits
-        // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.
-      }).format(finalBaseValue);
-
-      return <span ref={ref}>{formattedValue}</span>;
-    } catch (error) {
-      console.error('Error formatting amount:', error);
-      return <span ref={ref}>{value}</span>;
+export const Amount = ({
+  value = 0,
+  currency = 'USD',
+  locale = 'en-US',
+  hideDecimals = false,
+  currencyDisplay = 'symbol',
+  minimumFractionDigits,
+  maximumFractionDigits,
+  groupDigits = true,
+  valueInMinorUnits = true,
+  ...props
+}: AmountProps) => {
+  try {
+    if (
+      typeof value === 'number' &&
+      Math.abs(value) > Number.MAX_SAFE_INTEGER
+    ) {
+      console.warn(
+        `Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +
+          'For large numbers, pass the value as a string to maintain precision.'
+      );
+    }
+
+    const validCurrency = isValidCurrency(currency) ? currency : 'USD';
+    if (validCurrency !== currency) {
+      console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
     }
+
+    const decimals = getCurrencyDecimals(validCurrency);
+
+    // Handle minor units - use string manipulation for strings and Math.pow for numbers
+    const baseValue =
+      valueInMinorUnits && decimals > 0
+        ? typeof value === 'string'
+          ? value.slice(0, -decimals) + '.' + value.slice(-decimals)
+          : value / Math.pow(10, decimals)
+        : value;
+
+    // Remove decimals if hideDecimals is true - handle string and number separately
+    // Note: Not all numbers passed is converted to string as methods like Math.trunc
+    // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).
+    const finalBaseValue = hideDecimals
+      ? typeof baseValue === 'string'
+        ? baseValue.split('.')[0]
+        : Math.trunc(baseValue)
+      : baseValue;
+
+    const formattedValue = new Intl.NumberFormat(locale, {
+      style: 'currency' as const,
+      currency: validCurrency.toUpperCase(),
+      currencyDisplay,
+      minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
+      maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
+      useGrouping: groupDigits
+      // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.
+    }).format(finalBaseValue);
+
+    return <span {...props}>{formattedValue}</span>;
+  } catch (error) {
+    console.error('Error formatting amount:', error);
+    return <span {...props}>{value}</span>;
   }
-);
+};
 
 Amount.displayName = 'Amount';
diff --git a/packages/raystack/components/announcement-bar/announcement-bar.tsx b/packages/raystack/components/announcement-bar/announcement-bar.tsx
index 817ef3d36..302c73418 100644
--- a/packages/raystack/components/announcement-bar/announcement-bar.tsx
+++ b/packages/raystack/components/announcement-bar/announcement-bar.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 
 import { Flex } from '../flex';
 import { Text } from '../text';
 import styles from './announcement-bar.module.css';
 
-const announementBar = cva(styles['announcement-bar'], {
+const announcementBar = cva(styles['announcement-bar'], {
   variants: {
     variant: {
       gradient: styles['announcement-bar-gradient'],
@@ -20,7 +20,7 @@ const announementBar = cva(styles['announcement-bar'], {
   }
 });
 
-type AnnouncementBarProps = VariantProps<typeof announementBar> & {
+type AnnouncementBarProps = VariantProps<typeof announcementBar> & {
   leadingIcon?: ReactNode;
   className?: string;
   text: string;
@@ -41,7 +41,7 @@ export const AnnouncementBar = ({
 }: AnnouncementBarProps) => {
   return (
     <Flex
-      className={announementBar({ className, variant })}
+      className={announcementBar({ className, variant })}
       justify='center'
       align='center'
       gap='small'
@@ -65,3 +65,5 @@ export const AnnouncementBar = ({
     </Flex>
   );
 };
+
+AnnouncementBar.displayName = 'AnnouncementBar';
diff --git a/packages/raystack/components/avatar/avatar.tsx b/packages/raystack/components/avatar/avatar.tsx
index ee0a7170c..48dde77eb 100644
--- a/packages/raystack/components/avatar/avatar.tsx
+++ b/packages/raystack/components/avatar/avatar.tsx
@@ -1,12 +1,6 @@
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { cva, cx, VariantProps } from 'class-variance-authority';
-import {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  isValidElement,
-  ReactElement,
-  ReactNode
-} from 'react';
+import { ComponentProps, isValidElement, ReactElement, ReactNode } from 'react';
 import styles from './avatar.module.css';
 import { AVATAR_COLORS } from './utils';
 
@@ -160,64 +154,73 @@ export interface AvatarProps
   className?: string;
 }
 
-const AvatarRoot = forwardRef<HTMLSpanElement, AvatarProps>(
-  (
-    { className, alt, src, fallback, size, radius, variant, color, ...props },
-    ref
-  ) => (
-    <AvatarPrimitive.Root
-      ref={ref}
-      className={cx(
-        styles.imageWrapper,
-        avatar({ size, radius, variant, color }),
-        className
-      )}
-      {...props}
-    >
-      <AvatarPrimitive.Image className={image()} src={src} alt={alt} />
-      <AvatarPrimitive.Fallback className={styles.fallback}>
-        {fallback}
-      </AvatarPrimitive.Fallback>
-    </AvatarPrimitive.Root>
-  )
+const AvatarRoot = ({
+  className,
+  alt,
+  src,
+  fallback,
+  size,
+  radius,
+  variant,
+  color,
+  ...props
+}: AvatarProps) => (
+  <AvatarPrimitive.Root
+    className={cx(
+      styles.imageWrapper,
+      avatar({ size, radius, variant, color }),
+      className
+    )}
+    {...props}
+  >
+    <AvatarPrimitive.Image className={image()} src={src} alt={alt} />
+    <AvatarPrimitive.Fallback className={styles.fallback}>
+      {fallback}
+    </AvatarPrimitive.Fallback>
+  </AvatarPrimitive.Root>
 );
 
-AvatarRoot.displayName = AvatarPrimitive.Root.displayName;
+AvatarRoot.displayName = 'Avatar';
 
 export const Avatar = AvatarRoot;
 
-export interface AvatarGroupProps extends ComponentPropsWithoutRef<'div'> {
+export interface AvatarGroupProps extends ComponentProps<'div'> {
   children: React.ReactElement<AvatarProps>[];
   max?: number;
 }
 
-export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ children, max, className, ...props }, ref) => {
-    const avatars = max ? children.slice(0, max) : children;
-    const count = max && children.length > max ? children.length - max : 0;
+export const AvatarGroup = ({
+  children,
+  max,
+  className,
+  ...props
+}: AvatarGroupProps) => {
+  const avatars = max ? children.slice(0, max) : children;
+  const count = max && children.length > max ? children.length - max : 0;
 
-    // Overflow avatar matches the first avatar styling
-    const firstAvatarProps = getAvatarProps(avatars[0]);
+  // Overflow avatar matches the first avatar styling
+  const firstAvatarProps = getAvatarProps(avatars[0]);
 
-    return (
-      <div ref={ref} className={cx(styles.avatarGroup, className)} {...props}>
-        {avatars.map((avatar, index) => (
-          <div key={index} className={styles.avatarWrapper}>
-            {avatar}
-          </div>
-        ))}
-        {count > 0 && (
-          <div className={styles.avatarWrapper}>
-            <Avatar
-              size={firstAvatarProps.size}
-              radius={firstAvatarProps.radius}
-              variant={firstAvatarProps.variant}
-              color='neutral'
-              fallback={`+${count}`}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-);
+  return (
+    <div className={cx(styles.avatarGroup, className)} {...props}>
+      {avatars.map((avatar, index) => (
+        <div key={index} className={styles.avatarWrapper}>
+          {avatar}
+        </div>
+      ))}
+      {count > 0 && (
+        <div className={styles.avatarWrapper}>
+          <Avatar
+            size={firstAvatarProps.size}
+            radius={firstAvatarProps.radius}
+            variant={firstAvatarProps.variant}
+            color='neutral'
+            fallback={`+${count}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+AvatarGroup.displayName = 'Avatar.Group';
diff --git a/packages/raystack/components/badge/badge.tsx b/packages/raystack/components/badge/badge.tsx
index 613f545d0..222e0d9cd 100644
--- a/packages/raystack/components/badge/badge.tsx
+++ b/packages/raystack/components/badge/badge.tsx
@@ -1,47 +1,49 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { ReactNode } from "react";
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 
-import styles from "./badge.module.css";
+import styles from './badge.module.css';
 
 const badge = cva(styles['badge'], {
   variants: {
     variant: {
-      accent: styles["badge-accent"],
-      warning: styles["badge-warning"],
-      danger: styles["badge-danger"],
-      success: styles["badge-success"],
-      neutral: styles["badge-neutral"],
-      gradient: styles["badge-gradient"]
+      accent: styles['badge-accent'],
+      warning: styles['badge-warning'],
+      danger: styles['badge-danger'],
+      success: styles['badge-success'],
+      neutral: styles['badge-neutral'],
+      gradient: styles['badge-gradient']
     },
     size: {
-      micro: styles["badge-micro"],
-      small: styles["badge-small"],
-      regular: styles["badge-regular"],
+      micro: styles['badge-micro'],
+      small: styles['badge-small'],
+      regular: styles['badge-regular']
     },
     defaultVariants: {
-      variant: "accent",
-      size: "small"
+      variant: 'accent',
+      size: 'small'
     }
-  },
+  }
 });
 
-type BadgeProps = VariantProps<typeof badge> & {
-  icon?: ReactNode;
-  children: ReactNode;
-  className?: string;
-  screenReaderText?: string;
-}
+type BadgeProps = VariantProps<typeof badge> &
+  ComponentProps<'span'> & {
+    icon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    screenReaderText?: string;
+  };
 
-export const Badge = ({ 
+export const Badge = ({
   variant = 'accent',
   size = 'small',
   icon,
   children,
   className,
-  screenReaderText
+  screenReaderText,
+  ...props
 }: BadgeProps) => {
   return (
-    <span className={badge({ variant, size, className })}>
+    <span className={badge({ variant, size, className })} {...props}>
       {icon && <span className={styles['icon']}>{icon}</span>}
       {screenReaderText && (
         <span className={styles['sr-only']}>{screenReaderText}</span>
@@ -51,4 +53,4 @@ export const Badge = ({
   );
 };
 
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge';
diff --git a/packages/raystack/components/box/box.module.css b/packages/raystack/components/box/box.module.css
deleted file mode 100644
index 9f946dcbe..000000000
--- a/packages/raystack/components/box/box.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.box {
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/packages/raystack/components/box/box.tsx b/packages/raystack/components/box/box.tsx
index 9618584c3..87d923193 100644
--- a/packages/raystack/components/box/box.tsx
+++ b/packages/raystack/components/box/box.tsx
@@ -1,23 +1,7 @@
-import { cva, VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { ComponentProps } from 'react';
 
-import styles from "./box.module.css";
-
-// Note: This is the old component just copied in v1 folder as it is used in v1. 
-
-const box = cva(styles.box);
-
-type BoxProps = PropsWithChildren<VariantProps<typeof box>> &
-  HTMLAttributes<HTMLDivElement> & {
-    ref?: React.RefObject<HTMLDivElement>;
-  };
-
-export function Box({ children, className, ref, ...props }: BoxProps) {
-  return (
-    <div ref={ref} className={box({ className })} {...props}>
-      {children}
-    </div>
-  );
+export function Box(props: ComponentProps<'div'>) {
+  return <div {...props} />;
 }
 
-Box.displayName = "Box";
+Box.displayName = 'Box';
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
index 36f00e6f9..18c3d82eb 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
@@ -3,9 +3,8 @@
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import React, {
+  ComponentProps,
   cloneElement,
-  forwardRef,
-  HTMLAttributes,
   ReactElement,
   ReactNode
 } from 'react';
@@ -18,80 +17,72 @@ export interface BreadcrumbDropdownItem {
   onClick?: React.MouseEventHandler<HTMLElement>;
 }
 
-export interface BreadcrumbItemProps extends HTMLAttributes<HTMLAnchorElement> {
+export interface BreadcrumbItemProps extends ComponentProps<'a'> {
   leadingIcon?: ReactNode;
   current?: boolean;
   dropdownItems?: BreadcrumbDropdownItem[];
-  href?: string;
   as?: ReactElement;
 }
 
-export const BreadcrumbItem = forwardRef<
-  HTMLAnchorElement,
-  BreadcrumbItemProps
->(
-  (
-    {
-      as,
-      children,
-      className,
-      leadingIcon,
-      current,
-      href,
-      dropdownItems,
-      ...props
-    },
-    ref
-  ) => {
-    const renderedElement = as ?? <a ref={ref} />;
-    const label = (
-      <>
-        {leadingIcon && (
-          <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>
-        )}
-        {children && <span>{children}</span>}
-      </>
-    );
+export const BreadcrumbItem = ({
+  ref,
+  as,
+  children,
+  className,
+  leadingIcon,
+  current,
+  href,
+  dropdownItems,
+  ...props
+}: BreadcrumbItemProps) => {
+  const renderedElement = as ?? <a ref={ref} />;
+  const label = (
+    <>
+      {leadingIcon && (
+        <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>
+      )}
+      {children && <span>{children}</span>}
+    </>
+  );
 
-    if (dropdownItems) {
-      return (
-        <Menu>
-          <Menu.Trigger className={styles['breadcrumb-dropdown-trigger']}>
-            {label}
-            <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />
-          </Menu.Trigger>
-          <Menu.Content className={styles['breadcrumb-dropdown-content']}>
-            {dropdownItems.map((dropdownItem, dropdownIndex) => (
-              <Menu.Item
-                key={dropdownItem.key ?? dropdownIndex}
-                className={styles['breadcrumb-dropdown-item']}
-                onClick={dropdownItem?.onClick}
-              >
-                {dropdownItem.label}
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu>
-      );
-    }
+  if (dropdownItems) {
     return (
-      <li className={cx(styles['breadcrumb-item'], className)}>
-        {cloneElement(
-          renderedElement,
-          {
-            className: cx(
-              styles['breadcrumb-link'],
-              current && styles['breadcrumb-link-active']
-            ),
-            href,
-            ...props,
-            ...renderedElement.props
-          },
-          label
-        )}
-      </li>
+      <Menu>
+        <Menu.Trigger className={styles['breadcrumb-dropdown-trigger']}>
+          {label}
+          <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />
+        </Menu.Trigger>
+        <Menu.Content className={styles['breadcrumb-dropdown-content']}>
+          {dropdownItems.map((dropdownItem, dropdownIndex) => (
+            <Menu.Item
+              key={dropdownItem.key ?? dropdownIndex}
+              className={styles['breadcrumb-dropdown-item']}
+              onClick={dropdownItem?.onClick}
+            >
+              {dropdownItem.label}
+            </Menu.Item>
+          ))}
+        </Menu.Content>
+      </Menu>
     );
   }
-);
+  return (
+    <li className={cx(styles['breadcrumb-item'], className)}>
+      {cloneElement(
+        renderedElement,
+        {
+          className: cx(
+            styles['breadcrumb-link'],
+            current && styles['breadcrumb-link-active']
+          ),
+          href,
+          ...props,
+          ...renderedElement.props
+        },
+        label
+      )}
+    </li>
+  );
+};
 
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx b/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
index 52bc07c90..83e580d88 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
@@ -2,63 +2,37 @@
 
 import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { HTMLAttributes, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import styles from './breadcrumb.module.css';
 
-export interface BreadcrumbEllipsisProps
-  extends HTMLAttributes<HTMLSpanElement> {}
+export interface BreadcrumbEllipsisProps extends ComponentProps<'span'> {}
 
-export const BreadcrumbEllipsis = forwardRef<
-  HTMLSpanElement,
-  BreadcrumbEllipsisProps
->(
-  (
-    {
-      className,
-      children = <DotsHorizontalIcon width={20} height={20} />,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <span
-        className={cx(styles['breadcrumb-ellipsis'], className)}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </span>
-    );
-  }
-);
+export const BreadcrumbEllipsis = ({
+  className,
+  children = <DotsHorizontalIcon width={20} height={20} />,
+  ...props
+}: BreadcrumbEllipsisProps) => {
+  return (
+    <span className={cx(styles['breadcrumb-ellipsis'], className)} {...props}>
+      {children}
+    </span>
+  );
+};
 
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';
 
-export interface BreadcrumbSeparatorProps
-  extends HTMLAttributes<HTMLSpanElement> {}
+export interface BreadcrumbSeparatorProps extends ComponentProps<'span'> {}
 
-export const BreadcrumbSeparator = forwardRef<
-  HTMLSpanElement,
-  BreadcrumbSeparatorProps
->(
-  (
-    {
-      children = <ChevronRightIcon width={12} height={12} />,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <span
-        className={cx(styles['breadcrumb-separator'], className)}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </span>
-    );
-  }
-);
+export const BreadcrumbSeparator = ({
+  children = <ChevronRightIcon width={12} height={12} />,
+  className,
+  ...props
+}: BreadcrumbSeparatorProps) => {
+  return (
+    <span className={cx(styles['breadcrumb-separator'], className)} {...props}>
+      {children}
+    </span>
+  );
+};
 
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-root.tsx b/packages/raystack/components/breadcrumb/breadcrumb-root.tsx
index 2fdded41e..3bcf4ae9c 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-root.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-root.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { type VariantProps, cva } from 'class-variance-authority';
-import { HTMLAttributes, forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 import styles from './breadcrumb.module.css';
 
 const breadcrumbVariants = cva(styles['breadcrumb'], {
@@ -18,20 +18,19 @@ const breadcrumbVariants = cva(styles['breadcrumb'], {
 
 export interface BreadcrumbProps
   extends VariantProps<typeof breadcrumbVariants>,
-    HTMLAttributes<HTMLDivElement> {}
+    ComponentProps<'nav'> {}
 
-export const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbProps>(
-  ({ className, children, size = 'medium', ...props }, ref) => {
-    return (
-      <nav
-        className={breadcrumbVariants({ size, className })}
-        ref={ref}
-        {...props}
-      >
-        <ol className={styles['breadcrumb-list']}>{children}</ol>
-      </nav>
-    );
-  }
-);
+export const BreadcrumbRoot = ({
+  className,
+  children,
+  size = 'medium',
+  ...props
+}: BreadcrumbProps) => {
+  return (
+    <nav className={breadcrumbVariants({ size, className })} {...props}>
+      <ol className={styles['breadcrumb-list']}>{children}</ol>
+    </nav>
+  );
+};
 
-BreadcrumbRoot.displayName = 'BreadcrumbRoot';
+BreadcrumbRoot.displayName = 'Breadcrumb';
diff --git a/packages/raystack/components/button/button.tsx b/packages/raystack/components/button/button.tsx
index 25914fa5f..33bcbdbe7 100644
--- a/packages/raystack/components/button/button.tsx
+++ b/packages/raystack/components/button/button.tsx
@@ -1,6 +1,6 @@
 import { Button as ButtonPrimitive } from '@base-ui/react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { ElementRef, forwardRef, PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { Spinner } from '../spinner';
 import styles from './button.module.css';
@@ -124,7 +124,7 @@ const getLoaderOnlyClass = (size: 'small' | 'normal' | null) =>
     ? styles['loader-only-button-small']
     : styles['loader-only-button-normal'];
 
-type ButtonProps = PropsWithChildren<VariantProps<typeof button>> &
+type ButtonProps = VariantProps<typeof button> &
   ButtonPrimitive.Props & {
     loading?: boolean;
     loaderText?: ReactNode;
@@ -135,69 +135,60 @@ type ButtonProps = PropsWithChildren<VariantProps<typeof button>> &
     style?: React.CSSProperties;
   };
 
-export const Button = forwardRef<
-  ElementRef<typeof ButtonPrimitive>,
-  ButtonProps
->(
-  (
-    {
-      className,
-      variant = 'solid',
-      color = 'accent',
-      size = 'normal',
-      disabled,
-      loading,
-      loaderText,
-      leadingIcon,
-      trailingIcon,
-      maxWidth,
-      width,
-      style = {},
-      children,
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const isLoaderOnly = loading && !loaderText;
-    const widthStyle = { maxWidth, width };
-    const buttonStyle = { ...widthStyle, ...style };
+export const Button = ({
+  className,
+  variant = 'solid',
+  color = 'accent',
+  size = 'normal',
+  disabled,
+  loading,
+  loaderText,
+  leadingIcon,
+  trailingIcon,
+  maxWidth,
+  width,
+  style = {},
+  children,
+  render,
+  ...props
+}: ButtonProps) => {
+  const isLoaderOnly = loading && !loaderText;
+  const widthStyle = { maxWidth, width };
+  const buttonStyle = { ...widthStyle, ...style };
 
-    return (
-      <ButtonPrimitive
-        className={`${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`}
-        ref={ref}
-        disabled={disabled}
-        style={buttonStyle}
-        render={render}
-        nativeButton={!render}
-        focusableWhenDisabled={loading}
-        {...props}
-      >
-        {loading ? (
-          <>
-            <Spinner size={1} color='default' />
-            {loaderText && (
-              <span className={styles['loader-text']}>{loaderText}</span>
-            )}
-          </>
-        ) : (
-          <>
-            {leadingIcon && (
-              <span className={`${styles['icon']} ${styles['icon-leading']}`}>
-                {leadingIcon}
-              </span>
-            )}
-            {children}
-            {trailingIcon && (
-              <span className={`${styles['icon']} ${styles['icon-trailing']}`}>
-                {trailingIcon}
-              </span>
-            )}
-          </>
-        )}
-      </ButtonPrimitive>
-    );
-  }
-);
+  return (
+    <ButtonPrimitive
+      className={`${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`}
+      disabled={disabled}
+      style={buttonStyle}
+      render={render}
+      nativeButton={!render}
+      focusableWhenDisabled={loading}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <Spinner size={1} color='default' />
+          {loaderText && (
+            <span className={styles['loader-text']}>{loaderText}</span>
+          )}
+        </>
+      ) : (
+        <>
+          {leadingIcon && (
+            <span className={`${styles['icon']} ${styles['icon-leading']}`}>
+              {leadingIcon}
+            </span>
+          )}
+          {children}
+          {trailingIcon && (
+            <span className={`${styles['icon']} ${styles['icon-trailing']}`}>
+              {trailingIcon}
+            </span>
+          )}
+        </>
+      )}
+    </ButtonPrimitive>
+  );
+};
 Button.displayName = 'Button';
diff --git a/packages/raystack/components/calendar/calendar.tsx b/packages/raystack/components/calendar/calendar.tsx
index 0f3096c22..1e4c92991 100644
--- a/packages/raystack/components/calendar/calendar.tsx
+++ b/packages/raystack/components/calendar/calendar.tsx
@@ -210,3 +210,5 @@ export const Calendar = function ({
     />
   );
 };
+
+Calendar.displayName = 'Calendar';
diff --git a/packages/raystack/components/calendar/date-picker.tsx b/packages/raystack/components/calendar/date-picker.tsx
index e06d0a317..531d19d87 100644
--- a/packages/raystack/components/calendar/date-picker.tsx
+++ b/packages/raystack/components/calendar/date-picker.tsx
@@ -4,7 +4,13 @@ import { CalendarIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import { PropsBase, PropsSingleRequired } from 'react-day-picker';
 import { InputField } from '../input-field';
 import { InputFieldProps } from '../input-field/input-field';
@@ -193,7 +199,9 @@ export function DatePicker({
 
   return (
     <Popover open={showCalendar} onOpenChange={onOpenChange}>
-      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Trigger
+        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}
+      />
       <Popover.Content
         ref={contentRef}
         {...popoverProps}
@@ -215,3 +223,5 @@ export function DatePicker({
     </Popover>
   );
 }
+
+DatePicker.displayName = 'DatePicker';
diff --git a/packages/raystack/components/calendar/range-picker.tsx b/packages/raystack/components/calendar/range-picker.tsx
index 416cd1592..d1eec604d 100644
--- a/packages/raystack/components/calendar/range-picker.tsx
+++ b/packages/raystack/components/calendar/range-picker.tsx
@@ -3,7 +3,7 @@
 import { CalendarIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import dayjs from 'dayjs';
-import { useCallback, useMemo, useState } from 'react';
+import { isValidElement, useCallback, useMemo, useState } from 'react';
 import { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';
 import { Flex } from '../flex';
 import { InputField } from '../input-field';
@@ -167,7 +167,9 @@ export function RangePicker({
 
   return (
     <Popover open={showCalendar} onOpenChange={setShowCalendar}>
-      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Trigger
+        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}
+      />
       <Popover.Content
         {...popoverProps}
         className={cx(styles.calendarPopover, popoverProps?.className)}
@@ -199,3 +201,5 @@ export function RangePicker({
     </Popover>
   );
 }
+
+RangePicker.displayName = 'RangePicker';

From d3e0b3462b96b84901517d65f2f872439000151d Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 01:20:00 +0530
Subject: [PATCH 02/11] fix: breaking box test

---
 .../components/box/__tests__/box.test.tsx     | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/raystack/components/box/__tests__/box.test.tsx b/packages/raystack/components/box/__tests__/box.test.tsx
index 36b61e8e1..55d71d12b 100644
--- a/packages/raystack/components/box/__tests__/box.test.tsx
+++ b/packages/raystack/components/box/__tests__/box.test.tsx
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { Box } from '../box';
-import styles from '../box.module.css';
 
 describe('Box', () => {
   describe('Basic Rendering', () => {
@@ -34,25 +33,6 @@ describe('Box', () => {
     });
   });
 
-  describe('ClassName Handling', () => {
-    it('applies custom className', () => {
-      const { container } = render(<Box className='custom-class'>Content</Box>);
-      const box = container.querySelector('.custom-class');
-      expect(box).toBeInTheDocument();
-      expect(box).toHaveClass(styles.box);
-    });
-
-    it('combines multiple classNames', () => {
-      const { container } = render(
-        <Box className='class1 class2'>Content</Box>
-      );
-      const box = container.querySelector(`.${styles.box}`);
-      expect(box).toHaveClass('class1');
-      expect(box).toHaveClass('class2');
-      expect(box).toHaveClass(styles.box);
-    });
-  });
-
   describe('Ref Forwarding', () => {
     it('forwards ref correctly', () => {
       const ref = vi.fn();
@@ -154,8 +134,8 @@ describe('Box', () => {
     });
 
     it('renders with empty string children', () => {
-      const { container } = render(<Box>{``}</Box>);
-      const box = container.querySelector(`.${styles.box}`);
+      const { container } = render(<Box id='test-box'>{``}</Box>);
+      const box = container.querySelector('#test-box');
       expect(box).toBeInTheDocument();
       expect(box?.textContent).toBe('');
     });

From 8d3bfacb147a86d8d6899d00af851a4ed8722106 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 02:29:36 +0530
Subject: [PATCH 03/11] feat: migrate react 19 - 2

---
 .../raystack/components/callout/callout.tsx   | 165 +++++-----
 .../raystack/components/checkbox/checkbox.tsx |  18 +-
 .../components/code-block/code-block-code.tsx |  67 ++--
 .../code-block/code-block-language-select.tsx |  17 +-
 .../components/code-block/code-block-misc.tsx | 143 ++++-----
 .../components/code-block/code-block-root.tsx | 120 ++++---
 .../components/collapsible/collapsible.tsx    |  50 +--
 .../color-picker/color-picker-alpha.tsx       |   2 +
 .../color-picker/color-picker-area.tsx        |   8 +-
 .../color-picker/color-picker-hue.tsx         |   2 +
 .../color-picker/color-picker-input.tsx       |   8 +-
 .../color-picker/color-picker-mode.tsx        |   4 +-
 .../color-picker/color-picker-root.tsx        |  12 +-
 .../components/combobox/combobox-content.tsx  |  78 ++---
 .../components/combobox/combobox-input.tsx    |  12 +-
 .../components/combobox/combobox-item.tsx     | 104 +++---
 .../components/combobox/combobox-misc.tsx     |  40 +--
 .../components/combobox/combobox-root.tsx     |   8 +-
 .../raystack/components/command/command.tsx   | 140 ++++----
 .../components/container/container.tsx        |  42 ++-
 .../context-menu/context-menu-content.tsx     | 300 +++++++++---------
 .../context-menu/context-menu-item.tsx        |  70 ++--
 .../context-menu/context-menu-misc.tsx        |  52 ++-
 .../context-menu/context-menu-root.tsx        |   8 +-
 .../context-menu/context-menu-trigger.tsx     | 111 +++----
 25 files changed, 751 insertions(+), 830 deletions(-)

diff --git a/packages/raystack/components/callout/callout.tsx b/packages/raystack/components/callout/callout.tsx
index eee94b0b2..95e909683 100644
--- a/packages/raystack/components/callout/callout.tsx
+++ b/packages/raystack/components/callout/callout.tsx
@@ -1,13 +1,8 @@
 'use client';
 
 import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { type VariantProps, cva } from 'class-variance-authority';
-import {
-  CSSProperties,
-  type HTMLAttributes,
-  ReactNode,
-  forwardRef
-} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentProps, type CSSProperties, type ReactNode } from 'react';
 
 import styles from './callout.module.css';
 
@@ -35,7 +30,7 @@ const callout = cva(styles.callout, {
 });
 
 export interface CalloutProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends ComponentProps<'div'>,
     VariantProps<typeof callout> {
   children: ReactNode;
   action?: ReactNode;
@@ -46,91 +41,85 @@ export interface CalloutProps
   icon?: ReactNode;
 }
 
-export const Callout = forwardRef<HTMLDivElement, CalloutProps>(
-  (
-    {
-      className,
-      type = 'grey',
-      outline,
-      highContrast,
-      children,
-      action,
-      dismissible,
-      onDismiss,
-      width,
-      style,
-      icon = <InfoCircledIcon />,
-      ...props
-    },
-    ref
-  ) => {
-    const combinedStyle = {
-      ...style,
-      ...(width && { width: typeof width === 'number' ? `${width}px` : width })
-    };
+export function Callout({
+  className,
+  type = 'grey',
+  outline,
+  highContrast,
+  children,
+  action,
+  dismissible,
+  onDismiss,
+  width,
+  style,
+  icon = <InfoCircledIcon />,
+  ...props
+}: CalloutProps) {
+  const combinedStyle = {
+    ...style,
+    ...(width && { width: typeof width === 'number' ? `${width}px` : width })
+  };
 
-    const getRole = () => {
-      switch (type) {
-        case 'alert':
-          return 'alert';
-        case 'success':
-          return 'status';
-        default:
-          return 'status';
-      }
-    };
+  const getRole = () => {
+    switch (type) {
+      case 'alert':
+        return 'alert';
+      case 'success':
+        return 'status';
+      default:
+        return 'status';
+    }
+  };
 
-    return (
-      <div
-        ref={ref}
-        className={`${callout({ type, outline, highContrast })} ${className || ''}`}
-        style={combinedStyle}
-        role={getRole()}
-        aria-live={type === 'alert' ? 'assertive' : 'polite'}
-        {...props}
-      >
-        <div className={styles.container}>
-          <div className={styles.messageContainer}>
-            {icon && (
-              <div className={styles.icon} aria-hidden='true'>
-                {icon}
-              </div>
-            )}
-            <div className={styles.message}>{children}</div>
-          </div>
+  return (
+    <div
+      className={`${callout({ type, outline, highContrast })} ${className || ''}`}
+      style={combinedStyle}
+      role={getRole()}
+      aria-live={type === 'alert' ? 'assertive' : 'polite'}
+      {...props}
+    >
+      <div className={styles.container}>
+        <div className={styles.messageContainer}>
+          {icon && (
+            <div className={styles.icon} aria-hidden='true'>
+              {icon}
+            </div>
+          )}
+          <div className={styles.message}>{children}</div>
+        </div>
 
-          <div className={styles.actionsContainer}>
-            {action && <div className={styles.action}>{action}</div>}
-            {dismissible && (
-              <button
-                className={styles.dismiss}
-                onClick={onDismiss}
-                aria-label='Dismiss message'
-                type='button'
+        <div className={styles.actionsContainer}>
+          {action && <div className={styles.action}>{action}</div>}
+          {dismissible && (
+            <button
+              className={styles.dismiss}
+              onClick={onDismiss}
+              aria-label='Dismiss message'
+              type='button'
+            >
+              <svg
+                width='12'
+                height='12'
+                viewBox='0 0 12 12'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+                aria-hidden='true'
+                role='presentation'
               >
-                <svg
-                  width='12'
-                  height='12'
-                  viewBox='0 0 12 12'
-                  fill='none'
-                  xmlns='http://www.w3.org/2000/svg'
-                  aria-hidden='true'
-                  role='presentation'
-                >
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'
-                    fill='currentColor'
-                  />
-                </svg>
-              </button>
-            )}
-          </div>
+                <path
+                  fillRule='evenodd'
+                  clipRule='evenodd'
+                  d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'
+                  fill='currentColor'
+                />
+              </svg>
+            </button>
+          )}
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+}
 
 Callout.displayName = 'Callout';
diff --git a/packages/raystack/components/checkbox/checkbox.tsx b/packages/raystack/components/checkbox/checkbox.tsx
index 946948311..47d142583 100644
--- a/packages/raystack/components/checkbox/checkbox.tsx
+++ b/packages/raystack/components/checkbox/checkbox.tsx
@@ -3,7 +3,6 @@
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 
 import styles from './checkbox.module.css';
 
@@ -43,26 +42,21 @@ const IndeterminateIcon = () => (
   </svg>
 );
 
-const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupPrimitive.Props>(
-  ({ className, ...props }, ref) => (
+function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {
+  return (
     <CheckboxGroupPrimitive
-      ref={ref}
       className={cx(styles.group, className)}
       {...props}
     />
-  )
-);
+  );
+}
 
 CheckboxGroup.displayName = 'Checkbox.Group';
 
-const CheckboxItem = forwardRef<
-  ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxPrimitive.Root.Props
->(({ className, ...props }, ref) => {
+function CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       className={cx(styles.checkbox, className)}
-      ref={ref}
       {...props}
     >
       <CheckboxPrimitive.Indicator
@@ -75,7 +69,7 @@ const CheckboxItem = forwardRef<
       />
     </CheckboxPrimitive.Root>
   );
-});
+}
 
 CheckboxItem.displayName = 'Checkbox';
 
diff --git a/packages/raystack/components/code-block/code-block-code.tsx b/packages/raystack/components/code-block/code-block-code.tsx
index d5588fb6f..162bbb019 100644
--- a/packages/raystack/components/code-block/code-block-code.tsx
+++ b/packages/raystack/components/code-block/code-block-code.tsx
@@ -2,13 +2,13 @@
 
 import { cx } from 'class-variance-authority';
 import { Highlight, Language } from 'prism-react-renderer';
-import { forwardRef, HTMLAttributes, memo } from 'react';
+import { ComponentProps, memo } from 'react';
 import { useIsomorphicLayoutEffect } from '~/hooks';
 import code from './code.module.css';
 import styles from './code-block.module.css';
 import { useCodeBlockContext } from './code-block-root';
 
-export interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {
+export interface CodeBlockCodeProps extends ComponentProps<'div'> {
   children: string;
   language: Language;
   value?: string;
@@ -17,40 +17,43 @@ export interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {
 
 const emptyTheme = { plain: {}, styles: [] };
 
-export const CodeBlockCode = forwardRef<HTMLDivElement, CodeBlockCodeProps>(
-  ({ children, language, className, value, ...props }, ref) => {
-    const { value: contextValue, setCode, setValue } = useCodeBlockContext();
-    const computedValue = value ?? language;
-    const isContextValueDefined = !!contextValue;
-    const shouldRender =
-      !isContextValueDefined || contextValue === computedValue;
-    const content = children.trim();
+export const CodeBlockCode = ({
+  children,
+  language,
+  className,
+  value,
+  ...props
+}: CodeBlockCodeProps) => {
+  const { value: contextValue, setCode, setValue } = useCodeBlockContext();
+  const computedValue = value ?? language;
+  const isContextValueDefined = !!contextValue;
+  const shouldRender = !isContextValueDefined || contextValue === computedValue;
+  const content = children.trim();
 
-    useIsomorphicLayoutEffect(() => {
-      // if value is not defined, set the value
-      if (!isContextValueDefined) setValue(language);
-      // if should render, store the code
-      if (shouldRender) setCode(content);
-    }, [
-      content,
-      setCode,
-      shouldRender,
-      setValue,
-      language,
-      isContextValueDefined
-    ]);
+  useIsomorphicLayoutEffect(() => {
+    // if value is not defined, set the value
+    if (!isContextValueDefined) setValue(language);
+    // if should render, store the code
+    if (shouldRender) setCode(content);
+  }, [
+    content,
+    setCode,
+    shouldRender,
+    setValue,
+    language,
+    isContextValueDefined
+  ]);
 
-    if (!shouldRender) return null;
+  if (!shouldRender) return null;
 
-    return (
-      <div ref={ref} className={cx(styles.codeContent, className)} {...props}>
-        <CodeHighlight content={content} language={language} />
-      </div>
-    );
-  }
-);
+  return (
+    <div className={cx(styles.codeContent, className)} {...props}>
+      <CodeHighlight content={content} language={language} />
+    </div>
+  );
+};
 
-CodeBlockCode.displayName = 'CodeBlockCode';
+CodeBlockCode.displayName = 'CodeBlock.Code';
 
 const CodeHighlight = memo(
   ({ content, language }: { content: string; language: Language }) => {
diff --git a/packages/raystack/components/code-block/code-block-language-select.tsx b/packages/raystack/components/code-block/code-block-language-select.tsx
index c3cc9acfc..8701e06ed 100644
--- a/packages/raystack/components/code-block/code-block-language-select.tsx
+++ b/packages/raystack/components/code-block/code-block-language-select.tsx
@@ -2,7 +2,7 @@
 
 import { cx } from 'class-variance-authority';
 import { Language } from 'prism-react-renderer';
-import { ComponentProps, ElementRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Select } from '../select';
 import { SingleSelectProps } from '../select/select-root';
 import styles from './code-block.module.css';
@@ -17,15 +17,14 @@ export const CodeBlockLanguageSelect = (props: SingleSelectProps) => {
   return <Select onValueChange={handleValueChange} value={value} {...props} />;
 };
 
-CodeBlockLanguageSelect.displayName = 'CodeBlockLanguageSelect';
+CodeBlockLanguageSelect.displayName = 'CodeBlock.LanguageSelect';
 
-export const CodeBlockLanguageSelectTrigger = forwardRef<
-  ElementRef<typeof Select.Trigger>,
-  ComponentProps<typeof Select.Trigger>
->(({ className, ...props }, ref) => {
+export function CodeBlockLanguageSelectTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof Select.Trigger>) {
   return (
     <Select.Trigger
-      ref={ref}
       className={cx(styles.languageSelectTrigger, className)}
       size='small'
       variant='text'
@@ -34,6 +33,6 @@ export const CodeBlockLanguageSelectTrigger = forwardRef<
       <Select.Value />
     </Select.Trigger>
   );
-});
+}
 
-CodeBlockLanguageSelectTrigger.displayName = 'CodeBlockLanguageSelectTrigger';
+CodeBlockLanguageSelectTrigger.displayName = 'CodeBlock.LanguageSelectTrigger';
diff --git a/packages/raystack/components/code-block/code-block-misc.tsx b/packages/raystack/components/code-block/code-block-misc.tsx
index 25330596e..5f0a62733 100644
--- a/packages/raystack/components/code-block/code-block-misc.tsx
+++ b/packages/raystack/components/code-block/code-block-misc.tsx
@@ -1,13 +1,7 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import {
-  ComponentProps,
-  ElementRef,
-  forwardRef,
-  HTMLAttributes,
-  ReactNode
-} from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Button } from '../button';
 import { CopyButton } from '../copy-button';
 import { Flex } from '../flex';
@@ -15,26 +9,27 @@ import { Text } from '../text';
 import styles from './code-block.module.css';
 import { useCodeBlockContext } from './code-block-root';
 
-export const CodeBlockContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
+export function CodeBlockContent({
+  children,
+  className,
+  ...props
+}: ComponentProps<'div'>) {
   return (
-    <div ref={ref} className={cx(styles.content, className)} {...props}>
+    <div className={cx(styles.content, className)} {...props}>
       {children}
     </div>
   );
-});
+}
 
-CodeBlockContent.displayName = 'CodeBlockContent';
+CodeBlockContent.displayName = 'CodeBlock.Content';
 
-export const CodeBlockHeader = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentProps<typeof Flex>
->(({ children, className, ...props }, ref) => {
+export function CodeBlockHeader({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
   return (
     <Flex
-      ref={ref}
       align='center'
       gap={4}
       className={cx(styles.header, className)}
@@ -43,85 +38,77 @@ export const CodeBlockHeader = forwardRef<
       {children}
     </Flex>
   );
-});
+}
 
-CodeBlockHeader.displayName = 'CodeBlockHeader';
+CodeBlockHeader.displayName = 'CodeBlock.Header';
 
-export const CodeBlockLabel = forwardRef<
-  ElementRef<typeof Text>,
-  ComponentProps<typeof Text>
->(({ children, className, ...props }, ref) => {
+export function CodeBlockLabel({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof Text>) {
   return (
-    <Text ref={ref} className={cx(styles.label, className)} {...props}>
+    <Text className={cx(styles.label, className)} {...props}>
       {children}
     </Text>
   );
-});
+}
 
-CodeBlockLabel.displayName = 'CodeBlockLabel';
+CodeBlockLabel.displayName = 'CodeBlock.Label';
 
 export interface CodeBlockCollapseTriggerProps
   extends Omit<ComponentProps<typeof Button>, 'children'> {
   children?: ReactNode | ((collapsed: boolean) => ReactNode);
 }
-export const CodeBlockCollapseTrigger = forwardRef<
-  HTMLButtonElement,
-  CodeBlockCollapseTriggerProps
->(
-  (
-    {
-      className,
-      children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    const { maxLines, collapsed, toggleCollapsed, code } =
-      useCodeBlockContext();
-    const canCollapse = maxLines && maxLines > 0;
-    const lineCount = code?.split('\n').length ?? 0;
-
-    if (!canCollapse || lineCount < maxLines) return null;
-
-    return (
-      <Button
-        ref={ref}
-        onClick={e => {
-          toggleCollapsed();
-          onClick?.(e);
-        }}
-        variant='text'
-        color='neutral'
-        className={cx(
-          styles.collapseTrigger,
-          collapsed && styles.collapsed,
-          className
-        )}
-        {...props}
-      >
-        {typeof children === 'function' ? children(!!collapsed) : children}
-      </Button>
-    );
-  }
-);
-
-CodeBlockCollapseTrigger.displayName = 'CodeBlockCollapseTrigger';
+
+export function CodeBlockCollapseTrigger({
+  className,
+  children = collapsed => (collapsed ? 'Show Code' : 'Hide Code'),
+  onClick,
+  ...props
+}: CodeBlockCollapseTriggerProps) {
+  const { maxLines, collapsed, toggleCollapsed, code } = useCodeBlockContext();
+  const canCollapse = maxLines && maxLines > 0;
+  const lineCount = code?.split('\n').length ?? 0;
+
+  if (!canCollapse || lineCount < maxLines) return null;
+
+  return (
+    <Button
+      onClick={e => {
+        toggleCollapsed();
+        onClick?.(e);
+      }}
+      variant='text'
+      color='neutral'
+      className={cx(
+        styles.collapseTrigger,
+        collapsed && styles.collapsed,
+        className
+      )}
+      {...props}
+    >
+      {typeof children === 'function' ? children(!!collapsed) : children}
+    </Button>
+  );
+}
+
+CodeBlockCollapseTrigger.displayName = 'CodeBlock.CollapseTrigger';
 
 export interface CodeBlockCopyButtonProps
   extends Omit<ComponentProps<typeof CopyButton>, 'text'> {
   variant?: 'floating' | 'default';
 }
 
-export const CodeBlockCopyButton = forwardRef<
-  ElementRef<typeof CopyButton>,
-  CodeBlockCopyButtonProps
->(({ className, variant = 'default', ...props }, ref) => {
+export function CodeBlockCopyButton({
+  className,
+  variant = 'default',
+  ...props
+}: CodeBlockCopyButtonProps) {
   const { code = '' } = useCodeBlockContext();
 
   return (
     <CopyButton
-      ref={ref}
       text={code}
       size={variant === 'floating' ? 2 : 3}
       className={cx(
@@ -132,6 +119,6 @@ export const CodeBlockCopyButton = forwardRef<
       {...props}
     />
   );
-});
+}
 
-CodeBlockCopyButton.displayName = 'CodeBlockCopyButton';
+CodeBlockCopyButton.displayName = 'CodeBlock.CopyButton';
diff --git a/packages/raystack/components/code-block/code-block-root.tsx b/packages/raystack/components/code-block/code-block-root.tsx
index a6e30f219..b2b2d00ee 100644
--- a/packages/raystack/components/code-block/code-block-root.tsx
+++ b/packages/raystack/components/code-block/code-block-root.tsx
@@ -2,9 +2,8 @@
 
 import { cx } from 'class-variance-authority';
 import {
+  ComponentProps,
   createContext,
-  forwardRef,
-  HTMLAttributes,
   useCallback,
   useContext,
   useState
@@ -38,7 +37,7 @@ export const useCodeBlockContext = () => {
 };
 
 export interface CodeBlockProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends ComponentProps<'div'>,
     CodeBlockCommonProps {
   defaultValue?: string;
   maxHeight?: string | number;
@@ -47,70 +46,65 @@ export interface CodeBlockProps
   onCollapseChange?: (value: boolean) => void;
 }
 
-export const CodeBlockRoot = forwardRef<HTMLDivElement, CodeBlockProps>(
-  (
-    {
-      children,
-      value: providedValue,
-      onValueChange,
-      defaultValue,
-      hideLineNumbers = false,
-      maxLines,
-      maxHeight,
-      className,
-      collapsed: providedCollapsed,
-      defaultCollapsed = true,
-      onCollapseChange,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalValue, setInternalValue] = useState<string | undefined>(
-      defaultValue
-    );
-    const [code, setCode] = useState<string | undefined>();
-    const [internalCollapsed, setInternalCollapsed] = useState<boolean>(
-      defaultCollapsed ?? false
-    );
+export const CodeBlockRoot = ({
+  children,
+  value: providedValue,
+  onValueChange,
+  defaultValue,
+  hideLineNumbers = false,
+  maxLines,
+  maxHeight,
+  className,
+  collapsed: providedCollapsed,
+  defaultCollapsed = true,
+  onCollapseChange,
+  ...props
+}: CodeBlockProps) => {
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    defaultValue
+  );
+  const [code, setCode] = useState<string | undefined>();
+  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(
+    defaultCollapsed ?? false
+  );
 
-    const collapsed = providedCollapsed ?? internalCollapsed;
+  const collapsed = providedCollapsed ?? internalCollapsed;
 
-    const value = providedValue ?? internalValue ?? defaultValue;
+  const value = providedValue ?? internalValue ?? defaultValue;
 
-    const setValue = useCallback(
-      (newValue: string) => {
-        setInternalValue(newValue);
-        onValueChange?.(newValue);
-      },
-      [onValueChange]
-    );
+  const setValue = useCallback(
+    (newValue: string) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    },
+    [onValueChange]
+  );
 
-    const toggleCollapsed = useCallback(() => {
-      setInternalCollapsed(_internalCollapsed => {
-        onCollapseChange?.(!_internalCollapsed);
-        return !_internalCollapsed;
-      });
-    }, [onCollapseChange]);
+  const toggleCollapsed = useCallback(() => {
+    setInternalCollapsed(_internalCollapsed => {
+      onCollapseChange?.(!_internalCollapsed);
+      return !_internalCollapsed;
+    });
+  }, [onCollapseChange]);
 
-    return (
-      <CodeBlockContext.Provider
-        value={{
-          hideLineNumbers,
-          value,
-          setValue,
-          code,
-          setCode,
-          maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger
-          collapsed,
-          toggleCollapsed
-        }}
-      >
-        <div ref={ref} className={cx(styles.container, className)} {...props}>
-          {children}
-        </div>
-      </CodeBlockContext.Provider>
-    );
-  }
-);
+  return (
+    <CodeBlockContext
+      value={{
+        hideLineNumbers,
+        value,
+        setValue,
+        code,
+        setCode,
+        maxLines: maxLines && maxLines + 1, // to compensate for the absolute collapse trigger
+        collapsed,
+        toggleCollapsed
+      }}
+    >
+      <div className={cx(styles.container, className)} {...props}>
+        {children}
+      </div>
+    </CodeBlockContext>
+  );
+};
 
 CodeBlockRoot.displayName = 'CodeBlock';
diff --git a/packages/raystack/components/collapsible/collapsible.tsx b/packages/raystack/components/collapsible/collapsible.tsx
index a0357843b..9399ccd99 100644
--- a/packages/raystack/components/collapsible/collapsible.tsx
+++ b/packages/raystack/components/collapsible/collapsible.tsx
@@ -2,39 +2,39 @@
 
 import { Collapsible as CollapsiblePrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './collapsible.module.css';
 
-const CollapsibleRoot = forwardRef<
-  ElementRef<typeof CollapsiblePrimitive.Root>,
-  CollapsiblePrimitive.Root.Props
->((props, ref) => <CollapsiblePrimitive.Root ref={ref} {...props} />);
+function CollapsibleRoot(props: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root {...props} />;
+}
 
 CollapsibleRoot.displayName = 'Collapsible';
 
-const CollapsibleTrigger = forwardRef<
-  ElementRef<typeof CollapsiblePrimitive.Trigger>,
-  CollapsiblePrimitive.Trigger.Props
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.Trigger
-    ref={ref}
-    className={cx(styles.trigger, className)}
-    {...props}
-  />
-));
+function CollapsibleTrigger({
+  className,
+  ...props
+}: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      className={cx(styles.trigger, className)}
+      {...props}
+    />
+  );
+}
 
 CollapsibleTrigger.displayName = 'Collapsible.Trigger';
 
-const CollapsiblePanel = forwardRef<
-  ElementRef<typeof CollapsiblePrimitive.Panel>,
-  CollapsiblePrimitive.Panel.Props
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.Panel
-    ref={ref}
-    className={cx(styles.panel, className)}
-    {...props}
-  />
-));
+function CollapsiblePanel({
+  className,
+  ...props
+}: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel
+      className={cx(styles.panel, className)}
+      {...props}
+    />
+  );
+}
 
 CollapsiblePanel.displayName = 'Collapsible.Panel';
 
diff --git a/packages/raystack/components/color-picker/color-picker-alpha.tsx b/packages/raystack/components/color-picker/color-picker-alpha.tsx
index 351581a53..4c1a9ced6 100644
--- a/packages/raystack/components/color-picker/color-picker-alpha.tsx
+++ b/packages/raystack/components/color-picker/color-picker-alpha.tsx
@@ -32,3 +32,5 @@ export const ColorPickerAlpha = ({
     </Slider.Root>
   );
 };
+
+ColorPickerAlpha.displayName = 'ColorPicker.Alpha';
diff --git a/packages/raystack/components/color-picker/color-picker-area.tsx b/packages/raystack/components/color-picker/color-picker-area.tsx
index e6e302b74..450db0599 100644
--- a/packages/raystack/components/color-picker/color-picker-area.tsx
+++ b/packages/raystack/components/color-picker/color-picker-area.tsx
@@ -3,17 +3,17 @@
 import { cx } from 'class-variance-authority';
 import Color from 'color';
 import {
-  type HTMLAttributes,
+  ComponentProps,
   PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
   useMemo,
   useRef
 } from 'react';
-import { useColorPicker } from './color-picker-root';
 import styles from './color-picker.module.css';
+import { useColorPicker } from './color-picker-root';
 
-export type ColorPickerAreaProps = HTMLAttributes<HTMLDivElement>;
+export type ColorPickerAreaProps = ComponentProps<'div'>;
 
 export const ColorPickerArea = ({
   className,
@@ -114,3 +114,5 @@ export const ColorPickerArea = ({
     </div>
   );
 };
+
+ColorPickerArea.displayName = 'ColorPicker.Area';
diff --git a/packages/raystack/components/color-picker/color-picker-hue.tsx b/packages/raystack/components/color-picker/color-picker-hue.tsx
index 866280584..bf2aa8fbc 100644
--- a/packages/raystack/components/color-picker/color-picker-hue.tsx
+++ b/packages/raystack/components/color-picker/color-picker-hue.tsx
@@ -30,3 +30,5 @@ export const ColorPickerHue = ({
     </Slider.Root>
   );
 };
+
+ColorPickerHue.displayName = 'ColorPicker.Hue';
diff --git a/packages/raystack/components/color-picker/color-picker-input.tsx b/packages/raystack/components/color-picker/color-picker-input.tsx
index d8dc34114..f29a8e59b 100644
--- a/packages/raystack/components/color-picker/color-picker-input.tsx
+++ b/packages/raystack/components/color-picker/color-picker-input.tsx
@@ -1,16 +1,16 @@
 'use client';
 
 import Color from 'color';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentProps } from 'react';
 import { InputField } from '../input-field';
 import { useColorPicker } from './color-picker-root';
 import { getColorString } from './utils';
 
-export const ColorPickerInput = (
-  props: ComponentPropsWithoutRef<typeof InputField>
-) => {
+export const ColorPickerInput = (props: ComponentProps<typeof InputField>) => {
   const { hue, saturation, lightness, alpha, mode } = useColorPicker();
   const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);
 
   return <InputField value={getColorString(color, mode)} readOnly {...props} />;
 };
+
+ColorPickerInput.displayName = 'ColorPicker.Input';
diff --git a/packages/raystack/components/color-picker/color-picker-mode.tsx b/packages/raystack/components/color-picker/color-picker-mode.tsx
index 62be78b1d..4ba509ee5 100644
--- a/packages/raystack/components/color-picker/color-picker-mode.tsx
+++ b/packages/raystack/components/color-picker/color-picker-mode.tsx
@@ -3,8 +3,8 @@
 import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 import { Select } from '../select';
-import { useColorPicker } from './color-picker-root';
 import styles from './color-picker.module.css';
+import { useColorPicker } from './color-picker-root';
 import { ModeType, SUPPORTED_MODES } from './utils';
 
 export interface ColorPickerModeProps
@@ -36,3 +36,5 @@ export const ColorPickerMode = ({
     </Select>
   );
 };
+
+ColorPickerMode.displayName = 'ColorPicker.Mode';
diff --git a/packages/raystack/components/color-picker/color-picker-root.tsx b/packages/raystack/components/color-picker/color-picker-root.tsx
index 4c7ce408d..97c59b4d2 100644
--- a/packages/raystack/components/color-picker/color-picker-root.tsx
+++ b/packages/raystack/components/color-picker/color-picker-root.tsx
@@ -2,14 +2,14 @@
 
 import Color, { type ColorLike } from 'color';
 import {
-  ComponentPropsWithoutRef,
+  ComponentProps,
   createContext,
   useCallback,
   useContext,
   useState
 } from 'react';
 import { Flex } from '../flex';
-import { ColorObject, ModeType, getColorString } from './utils';
+import { ColorObject, getColorString, ModeType } from './utils';
 
 type ColorPickerContextValue = {
   hue: number;
@@ -34,7 +34,7 @@ export const useColorPicker = () => {
 };
 
 export interface ColorPickerProps
-  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {
+  extends Omit<ComponentProps<typeof Flex>, 'defaultValue'> {
   value?: ColorLike;
   defaultValue?: ColorLike;
   onValueChange?: (value: string, mode: string) => void;
@@ -97,7 +97,7 @@ export const ColorPickerRoot = ({
   );
 
   return (
-    <ColorPickerContext.Provider
+    <ColorPickerContext
       value={{
         hue,
         saturation,
@@ -109,6 +109,8 @@ export const ColorPickerRoot = ({
       }}
     >
       <Flex direction='column' gap={4} {...props} />
-    </ColorPickerContext.Provider>
+    </ColorPickerContext>
   );
 };
+
+ColorPickerRoot.displayName = 'ColorPicker';
diff --git a/packages/raystack/components/combobox/combobox-content.tsx b/packages/raystack/components/combobox/combobox-content.tsx
index 02d632c7f..b13fc29f4 100644
--- a/packages/raystack/components/combobox/combobox-content.tsx
+++ b/packages/raystack/components/combobox/combobox-content.tsx
@@ -2,7 +2,6 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './combobox.module.css';
 import { useComboboxContext } from './combobox-root';
 
@@ -13,47 +12,40 @@ export interface ComboboxContentProps
     >,
     ComboboxPrimitive.Popup.Props {}
 
-export const ComboboxContent = forwardRef<
-  ElementRef<typeof ComboboxPrimitive.Popup>,
-  ComboboxContentProps
->(
-  (
-    {
-      className,
-      children,
-      style,
-      render,
-      initialFocus,
-      finalFocus,
-      sideOffset = 4,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    const { inputContainerRef } = useComboboxContext();
-    return (
-      <ComboboxPrimitive.Portal>
-        <ComboboxPrimitive.Positioner
-          sideOffset={sideOffset}
-          className={styles.positioner}
-          anchor={inputContainerRef}
-          {...positionerProps}
+export const ComboboxContent = ({
+  ref,
+  className,
+  children,
+  style,
+  render,
+  initialFocus,
+  finalFocus,
+  sideOffset = 4,
+  ...positionerProps
+}: ComboboxContentProps) => {
+  const { inputContainerRef } = useComboboxContext();
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        sideOffset={sideOffset}
+        className={styles.positioner}
+        anchor={inputContainerRef}
+        {...positionerProps}
+      >
+        <ComboboxPrimitive.Popup
+          ref={ref}
+          className={cx(styles.content, className)}
+          style={style}
+          render={render}
+          initialFocus={initialFocus}
+          finalFocus={finalFocus}
         >
-          <ComboboxPrimitive.Popup
-            ref={ref}
-            className={cx(styles.content, className)}
-            style={style}
-            render={render}
-            initialFocus={initialFocus}
-            finalFocus={finalFocus}
-          >
-            <ComboboxPrimitive.List className={styles.list}>
-              {children}
-            </ComboboxPrimitive.List>
-          </ComboboxPrimitive.Popup>
-        </ComboboxPrimitive.Positioner>
-      </ComboboxPrimitive.Portal>
-    );
-  }
-);
+          <ComboboxPrimitive.List className={styles.list}>
+            {children}
+          </ComboboxPrimitive.List>
+        </ComboboxPrimitive.Popup>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+};
 ComboboxContent.displayName = 'Combobox.Content';
diff --git a/packages/raystack/components/combobox/combobox-input.tsx b/packages/raystack/components/combobox/combobox-input.tsx
index eb396c058..bca19aaeb 100644
--- a/packages/raystack/components/combobox/combobox-input.tsx
+++ b/packages/raystack/components/combobox/combobox-input.tsx
@@ -2,22 +2,18 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
-import { ElementRef, forwardRef } from 'react';
+import { type ComponentProps } from 'react';
 import { InputField } from '../input-field';
-import { InputFieldProps } from '../input-field/input-field';
 import styles from './combobox.module.css';
 import { useComboboxContext } from './combobox-root';
 
 export interface ComboboxInputProps
   extends Omit<
-    InputFieldProps,
+    ComponentProps<typeof InputField>,
     'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'
   > {}
 
-export const ComboboxInput = forwardRef<
-  ElementRef<typeof ComboboxPrimitive.Input>,
-  ComboboxInputProps
->(({ ...props }, ref) => {
+export const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {
   const { multiple, inputContainerRef, value, onValueChange } =
     useComboboxContext();
   return (
@@ -41,5 +37,5 @@ export const ComboboxInput = forwardRef<
       }
     />
   );
-});
+};
 ComboboxInput.displayName = 'Combobox.Input';
diff --git a/packages/raystack/components/combobox/combobox-item.tsx b/packages/raystack/components/combobox/combobox-item.tsx
index 827d181f1..08b95518f 100644
--- a/packages/raystack/components/combobox/combobox-item.tsx
+++ b/packages/raystack/components/combobox/combobox-item.tsx
@@ -2,7 +2,7 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
@@ -13,62 +13,56 @@ export interface ComboboxItemProps extends ComboboxPrimitive.Item.Props {
   leadingIcon?: ReactNode;
 }
 
-export const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(
-  (
-    {
-      className,
-      children,
-      value: providedValue,
-      leadingIcon,
-      disabled,
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const value = providedValue
-      ? providedValue
-      : typeof children === 'string'
-        ? children
-        : undefined;
+export const ComboboxItem = ({
+  className,
+  children,
+  value: providedValue,
+  leadingIcon,
+  disabled,
+  render,
+  ...props
+}: ComboboxItemProps) => {
+  const value = providedValue
+    ? providedValue
+    : typeof children === 'string'
+      ? children
+      : undefined;
 
-    const { multiple, inputValue, hasItems } = useComboboxContext();
+  const { multiple, inputValue, hasItems } = useComboboxContext();
 
-    // When items prop is not provided on Root, use custom filtering
-    if (!hasItems && inputValue?.length) {
-      const isMatched = getMatch(value, children, inputValue);
-      if (!isMatched) return null;
-    }
-
-    const element =
-      typeof children === 'string' ? (
-        <>
-          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}
-          <Text>{children}</Text>
-        </>
-      ) : (
-        children
-      );
+  // When items prop is not provided on Root, use custom filtering
+  if (!hasItems && inputValue?.length) {
+    const isMatched = getMatch(value, children, inputValue);
+    if (!isMatched) return null;
+  }
 
-    return (
-      <ComboboxPrimitive.Item
-        ref={ref}
-        value={value}
-        className={cx(styles.menuitem, className)}
-        disabled={disabled}
-        {...props}
-        render={
-          render
-            ? render
-            : (renderProps, state) => (
-                <div {...renderProps}>
-                  {multiple && <Checkbox checked={state.selected} />}
-                  {element}
-                </div>
-              )
-        }
-      />
+  const element =
+    typeof children === 'string' ? (
+      <>
+        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}
+        <Text>{children}</Text>
+      </>
+    ) : (
+      children
     );
-  }
-);
+
+  return (
+    <ComboboxPrimitive.Item
+      value={value}
+      className={cx(styles.menuitem, className)}
+      disabled={disabled}
+      {...props}
+      render={
+        render
+          ? render
+          : (renderProps, state) => (
+              <div {...renderProps}>
+                {multiple && <Checkbox checked={state.selected} />}
+                {element}
+              </div>
+            )
+      }
+    />
+  );
+};
 ComboboxItem.displayName = 'Combobox.Item';
diff --git a/packages/raystack/components/combobox/combobox-misc.tsx b/packages/raystack/components/combobox/combobox-misc.tsx
index 8fa7b8716..a4a2b2d51 100644
--- a/packages/raystack/components/combobox/combobox-misc.tsx
+++ b/packages/raystack/components/combobox/combobox-misc.tsx
@@ -2,59 +2,53 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './combobox.module.css';
 import { useComboboxContext } from './combobox-root';
 
-export const ComboboxLabel = forwardRef<
-  ElementRef<typeof ComboboxPrimitive.GroupLabel>,
-  ComboboxPrimitive.GroupLabel.Props
->(({ className, ...props }, ref) => {
+export const ComboboxLabel = ({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) => {
   const { inputValue, hasItems } = useComboboxContext();
   if (!hasItems && inputValue?.length) return null;
 
   return (
     <ComboboxPrimitive.GroupLabel
-      ref={ref}
       className={cx(styles.label, className)}
       {...props}
     />
   );
-});
+};
 ComboboxLabel.displayName = 'Combobox.Label';
 
-export const ComboboxGroup = forwardRef<
-  ElementRef<typeof ComboboxPrimitive.Group>,
-  ComboboxPrimitive.Group.Props
->(({ className, children, ...props }, ref) => {
+export const ComboboxGroup = ({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Group.Props) => {
   const { inputValue, hasItems } = useComboboxContext();
   if (!hasItems && inputValue?.length) return children;
 
   return (
-    <ComboboxPrimitive.Group
-      ref={ref}
-      className={cx(styles.group, className)}
-      {...props}
-    >
+    <ComboboxPrimitive.Group className={cx(styles.group, className)} {...props}>
       {children}
     </ComboboxPrimitive.Group>
   );
-});
+};
 ComboboxGroup.displayName = 'Combobox.Group';
 
-export const ComboboxSeparator = forwardRef<
-  ElementRef<typeof ComboboxPrimitive.Separator>,
-  ComboboxPrimitive.Separator.Props
->(({ className, ...props }, ref) => {
+export const ComboboxSeparator = ({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) => {
   const { inputValue, hasItems } = useComboboxContext();
   if (!hasItems && inputValue?.length) return null;
 
   return (
     <ComboboxPrimitive.Separator
-      ref={ref}
       className={cx(styles.separator, className)}
       {...props}
     />
   );
-});
+};
 ComboboxSeparator.displayName = 'Combobox.Separator';
diff --git a/packages/raystack/components/combobox/combobox-root.tsx b/packages/raystack/components/combobox/combobox-root.tsx
index a5ec15506..d9b8e93b1 100644
--- a/packages/raystack/components/combobox/combobox-root.tsx
+++ b/packages/raystack/components/combobox/combobox-root.tsx
@@ -125,9 +125,7 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
   );
 
   return (
-    <ComboboxContext.Provider
-      value={contextValue as ComboboxContextValue<unknown>}
-    >
+    <ComboboxContext value={contextValue as ComboboxContextValue<unknown>}>
       <ComboboxPrimitive.Root
         multiple={multiple}
         onValueChange={handleValueChange}
@@ -140,6 +138,8 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
       >
         {children}
       </ComboboxPrimitive.Root>
-    </ComboboxContext.Provider>
+    </ComboboxContext>
   );
 };
+
+ComboboxRoot.displayName = 'Combobox';
diff --git a/packages/raystack/components/command/command.tsx b/packages/raystack/components/command/command.tsx
index fd04cc01f..203e11dd1 100644
--- a/packages/raystack/components/command/command.tsx
+++ b/packages/raystack/components/command/command.tsx
@@ -11,13 +11,13 @@ import { Flex } from '../flex';
 import styles from './command.module.css';
 
 const command = cva(styles.command);
-const CommandRoot = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive ref={ref} className={command({ className })} {...props} />
-));
-CommandRoot.displayName = CommandPrimitive?.displayName;
+function CommandRoot({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return <CommandPrimitive className={command({ className })} {...props} />;
+}
+CommandRoot.displayName = 'Command';
 
 interface CommandDialogProps extends DialogPrimitive.DialogProps {}
 
@@ -32,82 +32,80 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 };
 
 const input = cva(styles.input);
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <Flex
-    align='center'
-    gap='small'
-    cmdk-input-wrapper=''
-    className={styles.inputWrapper}
-  >
-    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={input({ className })}
-      {...props}
-    />
-  </Flex>
-));
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <Flex
+      align='center'
+      gap='small'
+      cmdk-input-wrapper=''
+      className={styles.inputWrapper}
+    >
+      <MagnifyingGlassIcon
+        className={styles.inputIcon}
+        width={16}
+        height={16}
+      />
+      <CommandPrimitive.Input className={input({ className })} {...props} />
+    </Flex>
+  );
+}
 
-CommandInput.displayName = CommandPrimitive.Input.displayName;
+CommandInput.displayName = 'Command.Input';
 
 const list = cva(styles.list);
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />
-));
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return <CommandPrimitive.List className={list({ className })} {...props} />;
+}
 
-CommandList.displayName = CommandPrimitive.List.displayName;
+CommandList.displayName = 'Command.List';
 
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />
-));
+function CommandEmpty(
+  props: React.ComponentProps<typeof CommandPrimitive.Empty>
+) {
+  return <CommandPrimitive.Empty className={styles.empty} {...props} />;
+}
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+CommandEmpty.displayName = 'Command.Empty';
 
 const group = cva(styles.group);
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={group({ className })}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return <CommandPrimitive.Group className={group({ className })} {...props} />;
+}
+
+CommandGroup.displayName = 'Command.Group';
 
 const separator = cva(styles.separator);
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={separator({ className })}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      className={separator({ className })}
+      {...props}
+    />
+  );
+}
+CommandSeparator.displayName = 'Command.Separator';
 
 const item = cva(styles.item);
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />
-));
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return <CommandPrimitive.Item className={item({ className })} {...props} />;
+}
 
-CommandItem.displayName = CommandPrimitive.Item.displayName;
+CommandItem.displayName = 'Command.Item';
 
 const shortcut = cva(styles.shortcut);
 const CommandShortcut = ({
@@ -116,7 +114,7 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return <span className={shortcut({ className })} {...props} />;
 };
-CommandShortcut.displayName = 'CommandShortcut';
+CommandShortcut.displayName = 'Command.Shortcut';
 
 export const Command: any = Object.assign(CommandRoot, {
   Dialog: CommandDialog,
diff --git a/packages/raystack/components/container/container.tsx b/packages/raystack/components/container/container.tsx
index 0ff136846..70b528c34 100644
--- a/packages/raystack/components/container/container.tsx
+++ b/packages/raystack/components/container/container.tsx
@@ -1,49 +1,47 @@
-import { cva, VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentProps, HTMLAttributes, PropsWithChildren } from 'react';
 
-import styles from "./container.module.css";
+import styles from './container.module.css';
 
 const container = cva(styles.container, {
   variants: {
     size: {
-      small: styles["container-small"],
-      medium: styles["container-medium"],
-      large: styles["container-large"],
-      none: styles["container-none"],
+      small: styles['container-small'],
+      medium: styles['container-medium'],
+      large: styles['container-large'],
+      none: styles['container-none']
     },
     align: {
-      left: styles["container-align-left"],
-      center: styles["container-align-center"],
-      right: styles["container-align-right"],
+      left: styles['container-align-left'],
+      center: styles['container-align-center'],
+      right: styles['container-align-right']
     }
   },
   defaultVariants: {
-    size: "none",
-    align: "center",
-  },
+    size: 'none',
+    align: 'center'
+  }
 });
 
-type ContainerProps = PropsWithChildren<VariantProps<typeof container>> &
-  HTMLAttributes<HTMLElement> & {
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-  };
+type ContainerProps = VariantProps<typeof container> & ComponentProps<'div'>;
 
 export function Container({
   children,
   size,
   align,
   className,
-  role = "region",
+  role = 'region',
   ...props
 }: ContainerProps) {
   return (
-    <div 
-      className={container({ size, align, className })} 
+    <div
+      className={container({ size, align, className })}
       role={role}
       {...props}
     >
       {children}
     </div>
   );
-} 
\ No newline at end of file
+}
+
+Container.displayName = 'Container';
diff --git a/packages/raystack/components/context-menu/context-menu-content.tsx b/packages/raystack/components/context-menu/context-menu-content.tsx
index bc869a638..fd260fedd 100644
--- a/packages/raystack/components/context-menu/context-menu-content.tsx
+++ b/packages/raystack/components/context-menu/context-menu-content.tsx
@@ -5,7 +5,7 @@ import {
   ContextMenu as ContextMenuPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, KeyboardEvent, useCallback, useRef } from 'react';
+import { KeyboardEvent, useCallback, useRef } from 'react';
 import styles from '../menu/menu.module.css';
 import { useMenuContext } from '../menu/menu-root';
 import {
@@ -24,79 +24,58 @@ export interface ContextMenuContentProps
   searchPlaceholder?: string;
 }
 
-export const ContextMenuContent = forwardRef<
-  HTMLDivElement,
-  ContextMenuContentProps
->(
-  (
-    {
-      className,
-      children,
-      searchPlaceholder = 'Search...',
-      render,
-      finalFocus,
-      style,
-      sideOffset = 4,
-      align = 'start',
-      onFocus,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    const {
-      autocomplete,
-      inputValue,
-      onInputValueChange,
-      inputRef,
-      isInitialRender,
-      parent
-    } = useMenuContext();
+export const ContextMenuContent = ({
+  ref,
+  className,
+  children,
+  searchPlaceholder = 'Search...',
+  render,
+  finalFocus,
+  style,
+  sideOffset = 4,
+  align = 'start',
+  onFocus,
+  ...positionerProps
+}: ContextMenuContentProps) => {
+  const {
+    autocomplete,
+    inputValue,
+    onInputValueChange,
+    inputRef,
+    isInitialRender,
+    parent
+  } = useMenuContext();
+
+  const focusInput = useCallback(() => {
+    if (document?.activeElement !== inputRef?.current)
+      inputRef?.current?.focus();
+  }, [inputRef]);
+  const highlightedItem = useRef<
+    [index: number, reason: 'keyboard' | 'pointer' | 'none']
+  >([-1, 'none']);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-    const focusInput = useCallback(() => {
-      if (document?.activeElement !== inputRef?.current)
-        inputRef?.current?.focus();
-    }, [inputRef]);
-    const highlightedItem = useRef<
-      [index: number, reason: 'keyboard' | 'pointer' | 'none']
-    >([-1, 'none']);
-    const containerRef = useRef<HTMLDivElement>(null);
+  const highlightFirstItem = useCallback(() => {
+    if (!isInitialRender?.current) return;
+    isInitialRender.current = false;
+    const item = containerRef.current?.querySelector('[role="option"]');
+    if (!item) return;
+    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+  }, [isInitialRender]);
 
-    const highlightFirstItem = useCallback(() => {
-      if (!isInitialRender?.current) return;
-      isInitialRender.current = false;
-      const item = containerRef.current?.querySelector('[role="option"]');
-      if (!item) return;
-      item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
-    }, [isInitialRender]);
+  const checkAndOpenSubMenu = useCallback(() => {
+    if (highlightedItem.current[0] === -1) return;
+    const items = containerRef.current?.querySelectorAll('[role="option"]');
+    const item = items?.[highlightedItem.current[0]];
+    if (!item || !isElementSubMenuTrigger(item)) return;
+    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+  }, []);
 
-    const checkAndOpenSubMenu = useCallback(() => {
+  const checkAndCloseSubMenu = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
       if (highlightedItem.current[0] === -1) return;
       const items = containerRef.current?.querySelectorAll('[role="option"]');
       const item = items?.[highlightedItem.current[0]];
-      if (!item || !isElementSubMenuTrigger(item)) return;
-      dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
-    }, []);
-
-    const checkAndCloseSubMenu = useCallback(
-      (e: KeyboardEvent<HTMLInputElement>) => {
-        if (highlightedItem.current[0] === -1) return;
-        const items = containerRef.current?.querySelectorAll('[role="option"]');
-        const item = items?.[highlightedItem.current[0]];
-        if (
-          !item ||
-          !isElementSubMenuTrigger(item) ||
-          !isElementSubMenuOpen(item)
-        )
-          return;
-        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
-        e.stopPropagation();
-      },
-      []
-    );
-
-    const blurStaleMenuItem = useCallback((index: number) => {
-      const items = containerRef.current?.querySelectorAll('[role="option"]');
-      const item = items?.[index];
       if (
         !item ||
         !isElementSubMenuTrigger(item) ||
@@ -104,99 +83,106 @@ export const ContextMenuContent = forwardRef<
       )
         return;
       dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
-      item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
-    }, []);
+      e.stopPropagation();
+    },
+    []
+  );
 
-    return (
-      <ContextMenuPrimitive.Portal>
-        <ContextMenuPrimitive.Positioner
-          className={cx(styles.positioner)}
-          sideOffset={sideOffset}
-          align={align}
-          {...positionerProps}
+  const blurStaleMenuItem = useCallback((index: number) => {
+    const items = containerRef.current?.querySelectorAll('[role="option"]');
+    const item = items?.[index];
+    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))
+      return;
+    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+  }, []);
+
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className={cx(styles.positioner)}
+        sideOffset={sideOffset}
+        align={align}
+        {...positionerProps}
+      >
+        <ContextMenuPrimitive.Popup
+          ref={ref}
+          className={cx(
+            styles.content,
+            autocomplete && styles.comboboxContainer,
+            className
+          )}
+          style={style}
+          render={render}
+          finalFocus={finalFocus}
+          role={autocomplete ? 'dialog' : 'menu'}
+          onFocus={
+            autocomplete || parent?.autocomplete
+              ? e => {
+                  focusInput();
+                  e.stopPropagation();
+                  highlightFirstItem();
+                  onFocus?.(e);
+                }
+              : undefined
+          }
         >
-          <ContextMenuPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.content,
-              autocomplete && styles.comboboxContainer,
-              className
-            )}
-            style={style}
-            render={render}
-            finalFocus={finalFocus}
-            role={autocomplete ? 'dialog' : 'menu'}
-            onFocus={
-              autocomplete || parent?.autocomplete
-                ? e => {
-                    focusInput();
-                    e.stopPropagation();
-                    highlightFirstItem();
-                    onFocus?.(e);
-                  }
-                : undefined
-            }
-          >
-            {autocomplete ? (
-              <AutocompletePrimitive.Root
-                inline
-                open
-                value={inputValue}
-                onValueChange={(value: string) => onInputValueChange?.(value)}
-                autoHighlight={!!inputValue?.length}
-                mode='none'
-                loopFocus={false}
-                onItemHighlighted={(value, eventDetails) => {
-                  if (
-                    highlightedItem.current[1] === 'pointer' &&
-                    eventDetails.reason === 'keyboard'
-                  ) {
-                    blurStaleMenuItem(highlightedItem.current[0]);
-                  }
-                  highlightedItem.current = [
-                    eventDetails.index,
-                    eventDetails.reason
-                  ];
+          {autocomplete ? (
+            <AutocompletePrimitive.Root
+              inline
+              open
+              value={inputValue}
+              onValueChange={(value: string) => onInputValueChange?.(value)}
+              autoHighlight={!!inputValue?.length}
+              mode='none'
+              loopFocus={false}
+              onItemHighlighted={(value, eventDetails) => {
+                if (
+                  highlightedItem.current[1] === 'pointer' &&
+                  eventDetails.reason === 'keyboard'
+                ) {
+                  blurStaleMenuItem(highlightedItem.current[0]);
+                }
+                highlightedItem.current = [
+                  eventDetails.index,
+                  eventDetails.reason
+                ];
+              }}
+            >
+              <AutocompletePrimitive.Input
+                placeholder={searchPlaceholder}
+                className={styles.comboboxInput}
+                ref={inputRef}
+                onPointerEnter={e => {
+                  focusInput();
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'ArrowLeft') return;
+                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);
+                  if (e.key === 'ArrowRight' || e.key === 'Enter')
+                    checkAndOpenSubMenu();
+                  e.stopPropagation();
                 }}
+                tabIndex={-1}
+              />
+              <AutocompletePrimitive.List
+                className={styles.comboboxContent}
+                ref={containerRef}
               >
-                <AutocompletePrimitive.Input
-                  placeholder={searchPlaceholder}
-                  className={styles.comboboxInput}
-                  ref={inputRef}
-                  onPointerEnter={e => {
-                    focusInput();
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'ArrowLeft') return;
-                    if (e.key === 'Escape') return checkAndCloseSubMenu(e);
-                    if (e.key === 'ArrowRight' || e.key === 'Enter')
-                      checkAndOpenSubMenu();
-                    e.stopPropagation();
-                  }}
-                  tabIndex={-1}
-                />
-                <AutocompletePrimitive.List
-                  className={styles.comboboxContent}
-                  ref={containerRef}
-                >
-                  {children}
-                </AutocompletePrimitive.List>
-              </AutocompletePrimitive.Root>
-            ) : (
-              children
-            )}
-          </ContextMenuPrimitive.Popup>
-        </ContextMenuPrimitive.Positioner>
-      </ContextMenuPrimitive.Portal>
-    );
-  }
-);
+                {children}
+              </AutocompletePrimitive.List>
+            </AutocompletePrimitive.Root>
+          ) : (
+            children
+          )}
+        </ContextMenuPrimitive.Popup>
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+};
 ContextMenuContent.displayName = 'ContextMenu.Content';
 
-export const ContextMenuSubContent = forwardRef<
-  HTMLDivElement,
-  ContextMenuContentProps
->(({ ...props }, ref) => (
-  <ContextMenuContent ref={ref} sideOffset={2} {...props} />
-));
+export const ContextMenuSubContent = ({
+  ...props
+}: ContextMenuContentProps) => <ContextMenuContent sideOffset={2} {...props} />;
 ContextMenuSubContent.displayName = 'ContextMenu.SubContent';
diff --git a/packages/raystack/components/context-menu/context-menu-item.tsx b/packages/raystack/components/context-menu/context-menu-item.tsx
index ad0d2ea05..40446f786 100644
--- a/packages/raystack/components/context-menu/context-menu-item.tsx
+++ b/packages/raystack/components/context-menu/context-menu-item.tsx
@@ -4,7 +4,6 @@ import {
   Autocomplete as AutocompletePrimitive,
   ContextMenu as ContextMenuPrimitive
 } from '@base-ui/react';
-import { forwardRef } from 'react';
 import { Cell, CellBaseProps } from '../menu/cell';
 import { useMenuContext } from '../menu/menu-root';
 import { getMatch } from '../menu/utils';
@@ -15,46 +14,49 @@ export interface ContextMenuItemProps
   value?: string;
 }
 
-export const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
-  ({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {
-    const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+export const ContextMenuItem = ({
+  children,
+  value,
+  leadingIcon,
+  trailingIcon,
+  render,
+  ...props
+}: ContextMenuItemProps) => {
+  const { autocomplete, inputValue, shouldFilter } = useMenuContext();
 
-    const cell = render ?? (
-      <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
-    );
-
-    // In auto mode, hide items that don't match the search value
-    if (shouldFilter && !getMatch(value, children, inputValue)) {
-      return null;
-    }
+  const cell = render ?? (
+    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+  );
 
-    if (autocomplete) {
-      return (
-        <AutocompletePrimitive.Item
-          ref={ref}
-          value={value}
-          render={<ContextMenuPrimitive.Item render={cell} />}
-          {...props}
-        >
-          {children}
-        </AutocompletePrimitive.Item>
-      );
-    }
+  // In auto mode, hide items that don't match the search value
+  if (shouldFilter && !getMatch(value, children, inputValue)) {
+    return null;
+  }
 
+  if (autocomplete) {
     return (
-      <ContextMenuPrimitive.Item
-        ref={ref}
-        render={cell}
+      <AutocompletePrimitive.Item
+        value={value}
+        render={<ContextMenuPrimitive.Item render={cell} />}
         {...props}
-        onFocus={e => {
-          e.stopPropagation();
-          e.preventDefault();
-          e.preventBaseUIHandler();
-        }}
       >
         {children}
-      </ContextMenuPrimitive.Item>
+      </AutocompletePrimitive.Item>
     );
   }
-);
+
+  return (
+    <ContextMenuPrimitive.Item
+      render={cell}
+      {...props}
+      onFocus={e => {
+        e.stopPropagation();
+        e.preventDefault();
+        e.preventBaseUIHandler();
+      }}
+    >
+      {children}
+    </ContextMenuPrimitive.Item>
+  );
+};
 ContextMenuItem.displayName = 'ContextMenu.Item';
diff --git a/packages/raystack/components/context-menu/context-menu-misc.tsx b/packages/raystack/components/context-menu/context-menu-misc.tsx
index e5728580f..e92e80034 100644
--- a/packages/raystack/components/context-menu/context-menu-misc.tsx
+++ b/packages/raystack/components/context-menu/context-menu-misc.tsx
@@ -2,15 +2,16 @@
 
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Fragment, forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, Fragment, HTMLAttributes, ReactNode } from 'react';
 import styles from '../menu/menu.module.css';
 import { useMenuContext } from '../menu/menu-root';
 
 export type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;
-export const ContextMenuGroup = forwardRef<
-  HTMLDivElement,
-  ContextMenuGroupProps
->(({ className, children, ...props }, ref) => {
+export const ContextMenuGroup = ({
+  className,
+  children,
+  ...props
+}: ContextMenuGroupProps) => {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -18,18 +19,18 @@ export const ContextMenuGroup = forwardRef<
   }
 
   return (
-    <ContextMenuPrimitive.Group ref={ref} className={cx(className)} {...props}>
+    <ContextMenuPrimitive.Group className={cx(className)} {...props}>
       {children}
     </ContextMenuPrimitive.Group>
   );
-});
+};
 ContextMenuGroup.displayName = 'ContextMenu.Group';
 
 export type ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props;
-export const ContextMenuLabel = forwardRef<
-  HTMLDivElement,
-  ContextMenuLabelProps
->(({ className, ...props }, ref) => {
+export const ContextMenuLabel = ({
+  className,
+  ...props
+}: ContextMenuLabelProps) => {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -38,18 +39,17 @@ export const ContextMenuLabel = forwardRef<
 
   return (
     <ContextMenuPrimitive.GroupLabel
-      ref={ref}
       className={cx(styles.label, className)}
       {...props}
     />
   );
-});
+};
 ContextMenuLabel.displayName = 'ContextMenu.Label';
 
-export const ContextMenuSeparator = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+export const ContextMenuSeparator = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -58,23 +58,21 @@ export const ContextMenuSeparator = forwardRef<
 
   return (
     <div
-      ref={ref}
       role='separator'
       className={cx(styles.separator, className)}
       {...props}
     />
   );
-});
+};
 ContextMenuSeparator.displayName = 'ContextMenu.Separator';
 
-export const ContextMenuEmptyState = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode;
-  }
->(({ className, children, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.empty, className)} {...props}>
+export const ContextMenuEmptyState = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>) => (
+  <div className={cx(styles.empty, className)} {...props}>
     {children}
   </div>
-));
+);
 ContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';
diff --git a/packages/raystack/components/context-menu/context-menu-root.tsx b/packages/raystack/components/context-menu/context-menu-root.tsx
index 331b9ca55..f9b00cb65 100644
--- a/packages/raystack/components/context-menu/context-menu-root.tsx
+++ b/packages/raystack/components/context-menu/context-menu-root.tsx
@@ -73,7 +73,7 @@ export const ContextMenuRoot = ({
     );
 
   return (
-    <MenuContext.Provider
+    <MenuContext
       value={{
         autocomplete,
         inputRef,
@@ -91,7 +91,7 @@ export const ContextMenuRoot = ({
         loopFocus={false}
         {...props}
       />
-    </MenuContext.Provider>
+    </MenuContext>
   );
 };
 ContextMenuRoot.displayName = 'ContextMenu';
@@ -164,7 +164,7 @@ export const ContextMenuSubMenu = ({
     );
 
   return (
-    <MenuContext.Provider
+    <MenuContext
       value={{
         autocomplete,
         inputRef,
@@ -183,7 +183,7 @@ export const ContextMenuSubMenu = ({
         onOpenChange={handleOpenChange}
         {...props}
       />
-    </MenuContext.Provider>
+    </MenuContext>
   );
 };
 ContextMenuSubMenu.displayName = 'ContextMenu.SubMenu';
diff --git a/packages/raystack/components/context-menu/context-menu-trigger.tsx b/packages/raystack/components/context-menu/context-menu-trigger.tsx
index a09345bfd..34752c872 100644
--- a/packages/raystack/components/context-menu/context-menu-trigger.tsx
+++ b/packages/raystack/components/context-menu/context-menu-trigger.tsx
@@ -4,7 +4,6 @@ import {
   Autocomplete as AutocompletePrimitive,
   ContextMenu as ContextMenuPrimitive
 } from '@base-ui/react';
-import { forwardRef } from 'react';
 import { TriangleRightIcon } from '~/icons';
 import { Cell, CellBaseProps } from '../menu/cell';
 import { useMenuContext } from '../menu/menu-root';
@@ -13,16 +12,16 @@ import { getMatch } from '../menu/utils';
 export interface ContextMenuTriggerProps
   extends ContextMenuPrimitive.Trigger.Props {}
 
-export const ContextMenuTrigger = forwardRef<
-  HTMLDivElement,
-  ContextMenuTriggerProps
->(({ children, ...props }, ref) => {
+export const ContextMenuTrigger = ({
+  children,
+  ...props
+}: ContextMenuTriggerProps) => {
   return (
-    <ContextMenuPrimitive.Trigger ref={ref} {...props}>
+    <ContextMenuPrimitive.Trigger {...props}>
       {children}
     </ContextMenuPrimitive.Trigger>
   );
-});
+};
 ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
 
 export interface ContextMenuSubTriggerProps
@@ -31,61 +30,49 @@ export interface ContextMenuSubTriggerProps
   value?: string;
 }
 
-export const ContextMenuSubTrigger = forwardRef<
-  HTMLDivElement,
-  ContextMenuSubTriggerProps
->(
-  (
-    {
-      children,
-      value,
-      trailingIcon = <TriangleRightIcon />,
-      leadingIcon,
-      ...props
-    },
-    ref
-  ) => {
-    const { parent, inputRef } = useMenuContext();
+export const ContextMenuSubTrigger = ({
+  children,
+  value,
+  trailingIcon = <TriangleRightIcon />,
+  leadingIcon,
+  ...props
+}: ContextMenuSubTriggerProps) => {
+  const { parent, inputRef } = useMenuContext();
 
-    if (
-      parent?.shouldFilter &&
-      !getMatch(value, children, parent?.inputValue)
-    ) {
-      return null;
-    }
-
-    const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
-    return (
-      <ContextMenuPrimitive.SubmenuTrigger
-        ref={ref}
-        render={
-          parent?.autocomplete ? (
-            <AutocompletePrimitive.Item
-              value={value}
-              render={cell}
-              onPointerEnter={e => {
-                if (document?.activeElement !== parent?.inputRef?.current)
-                  parent?.inputRef?.current?.focus();
-                props?.onPointerEnter?.(e);
-              }}
-              onKeyDown={e => {
-                requestAnimationFrame(() => {
-                  inputRef?.current?.focus();
-                });
-                props?.onKeyDown?.(e);
-              }}
-            />
-          ) : (
-            cell
-          )
-        }
-        {...props}
-        role={parent?.autocomplete ? 'option' : 'menuitem'}
-        data-slot='menu-subtrigger'
-      >
-        {children}
-      </ContextMenuPrimitive.SubmenuTrigger>
-    );
+  if (parent?.shouldFilter && !getMatch(value, children, parent?.inputValue)) {
+    return null;
   }
-);
+
+  const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      render={
+        parent?.autocomplete ? (
+          <AutocompletePrimitive.Item
+            value={value}
+            render={cell}
+            onPointerEnter={e => {
+              if (document?.activeElement !== parent?.inputRef?.current)
+                parent?.inputRef?.current?.focus();
+              props?.onPointerEnter?.(e);
+            }}
+            onKeyDown={e => {
+              requestAnimationFrame(() => {
+                inputRef?.current?.focus();
+              });
+              props?.onKeyDown?.(e);
+            }}
+          />
+        ) : (
+          cell
+        )
+      }
+      {...props}
+      role={parent?.autocomplete ? 'option' : 'menuitem'}
+      data-slot='menu-subtrigger'
+    >
+      {children}
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+};
 ContextMenuSubTrigger.displayName = 'ContextMenu.SubTrigger';

From f6428f153235626f370d1de4f39c4af2ca1d4f08 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 03:09:11 +0530
Subject: [PATCH 04/11] feat: migrate react to React 19 - 3

---
 .../components/copy-button/copy-button.tsx    |  21 ++-
 .../data-table/components/content.tsx         |   2 +
 .../components/display-settings.tsx           |   6 +-
 .../data-table/components/filters.tsx         |   2 +
 .../data-table/components/search.tsx          |  94 +++++++-------
 .../data-table/components/toolbar.tsx         |   2 +
 .../components/virtualized-content.tsx        |   2 +
 .../components/data-table/data-table.tsx      |   8 +-
 .../components/dialog/dialog-content.tsx      |  80 +++++-------
 .../components/dialog/dialog-misc.tsx         | 115 ++++++++---------
 .../components/drawer/drawer-content.tsx      |  87 ++++++-------
 .../components/drawer/drawer-misc.tsx         |  64 ++++-----
 .../components/drawer/drawer-root.tsx         |   9 +-
 .../components/empty-state/empty-state.tsx    |  32 +++--
 packages/raystack/components/flex/flex.tsx    |  57 ++++----
 .../raystack/components/grid/grid-item.tsx    |  77 ++++++-----
 packages/raystack/components/grid/grid.tsx    | 122 +++++++++---------
 .../raystack/components/headline/headline.tsx |  45 +++----
 .../components/icon-button/icon-button.tsx    |  33 ++---
 19 files changed, 408 insertions(+), 450 deletions(-)

diff --git a/packages/raystack/components/copy-button/copy-button.tsx b/packages/raystack/components/copy-button/copy-button.tsx
index d080405a9..94ddfbf51 100644
--- a/packages/raystack/components/copy-button/copy-button.tsx
+++ b/packages/raystack/components/copy-button/copy-button.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { CopyIcon } from '@radix-ui/react-icons';
-import { ElementRef, forwardRef, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 import { CheckCircleFilledIcon } from '~/icons';
 import { IconButton, IconButtonProps } from '../icon-button/icon-button';
@@ -12,10 +12,12 @@ export interface CopyButtonProps extends IconButtonProps {
   resetIcon?: boolean;
 }
 
-export const CopyButton = forwardRef<
-  ElementRef<typeof IconButton>,
-  CopyButtonProps
->(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {
+export function CopyButton({
+  text,
+  resetTimeout = 1000,
+  resetIcon = true,
+  ...props
+}: CopyButtonProps) {
   const { copy } = useCopyToClipboard();
   const [isCopied, setIsCopied] = useState(false);
 
@@ -32,12 +34,7 @@ export const CopyButton = forwardRef<
   }
 
   return (
-    <IconButton
-      ref={ref}
-      {...props}
-      onClick={onCopy}
-      data-test-id='copy-button'
-    >
+    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>
       {isCopied ? (
         <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />
       ) : (
@@ -45,6 +42,6 @@ export const CopyButton = forwardRef<
       )}
     </IconButton>
   );
-});
+}
 
 CopyButton.displayName = 'CopyButton';
diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx
index 9f035a7df..08020f679 100644
--- a/packages/raystack/components/data-table/components/content.tsx
+++ b/packages/raystack/components/data-table/components/content.tsx
@@ -286,3 +286,5 @@ export function Content({
     </div>
   );
 }
+
+Content.displayName = 'DataTable.Content';
diff --git a/packages/raystack/components/data-table/components/display-settings.tsx b/packages/raystack/components/data-table/components/display-settings.tsx
index a25f1bcc7..40c19827d 100644
--- a/packages/raystack/components/data-table/components/display-settings.tsx
+++ b/packages/raystack/components/data-table/components/display-settings.tsx
@@ -9,8 +9,8 @@ import { Popover } from '../../popover';
 import styles from '../data-table.module.css';
 import {
   DataTableColumn,
-  SortOrdersValues,
-  defaultGroupOption
+  defaultGroupOption,
+  SortOrdersValues
 } from '../data-table.types';
 import { useDataTable } from '../hooks/useDataTable';
 import { DisplayProperties } from './display-properties';
@@ -124,3 +124,5 @@ export function DisplaySettings<TData, TValue>({
     </Popover>
   );
 }
+
+DisplaySettings.displayName = 'DataTable.DisplayControls';
diff --git a/packages/raystack/components/data-table/components/filters.tsx b/packages/raystack/components/data-table/components/filters.tsx
index d5c685dfa..17957f49d 100644
--- a/packages/raystack/components/data-table/components/filters.tsx
+++ b/packages/raystack/components/data-table/components/filters.tsx
@@ -166,3 +166,5 @@ export function Filters<TData, TValue>({
     </Flex>
   );
 }
+
+Filters.displayName = 'DataTable.Filters';
diff --git a/packages/raystack/components/data-table/components/search.tsx b/packages/raystack/components/data-table/components/search.tsx
index 371bde378..a7b909d5d 100644
--- a/packages/raystack/components/data-table/components/search.tsx
+++ b/packages/raystack/components/data-table/components/search.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { forwardRef } from 'react';
+import { ChangeEvent, type ComponentProps } from 'react';
 import { Search } from '../../search';
-import { SearchProps } from '../../search/search';
 import { useDataTable } from '../hooks/useDataTable';
 
-export interface DataTableSearchProps extends SearchProps {
+export interface DataTableSearchProps extends ComponentProps<typeof Search> {
   /**
    * Automatically disable search in zero state (when no data and no filters/search applied).
    * @defaultValue true
@@ -13,52 +12,53 @@ export interface DataTableSearchProps extends SearchProps {
   autoDisableInZeroState?: boolean;
 }
 
-export const TableSearch = forwardRef<HTMLInputElement, DataTableSearchProps>(
-  ({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
-    const {
-      updateTableQuery,
-      tableQuery,
-      shouldShowFilters = false
-    } = useDataTable();
+export function TableSearch({
+  autoDisableInZeroState = true,
+  disabled,
+  ...props
+}: DataTableSearchProps) {
+  const {
+    updateTableQuery,
+    tableQuery,
+    shouldShowFilters = false
+  } = useDataTable();
 
-    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      updateTableQuery(query => {
-        return {
-          ...query,
-          search: value
-        };
-      });
-    };
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    updateTableQuery(query => {
+      return {
+        ...query,
+        search: value
+      };
+    });
+  };
 
-    const handleClear = () => {
-      updateTableQuery(query => {
-        return {
-          ...query,
-          search: ''
-        };
-      });
-    };
+  const handleClear = () => {
+    updateTableQuery(query => {
+      return {
+        ...query,
+        search: ''
+      };
+    });
+  };
 
-    // Auto-disable in zero state if enabled, but allow manual override
-    // Once search is applied, keep it enabled (even if shouldShowFilters is false)
-    const hasSearch = Boolean(
-      tableQuery?.search && tableQuery.search.trim() !== ''
-    );
-    const isDisabled =
-      disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
+  // Auto-disable in zero state if enabled, but allow manual override
+  // Once search is applied, keep it enabled (even if shouldShowFilters is false)
+  const hasSearch = Boolean(
+    tableQuery?.search && tableQuery.search.trim() !== ''
+  );
+  const isDisabled =
+    disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
 
-    return (
-      <Search
-        {...props}
-        ref={ref}
-        onChange={handleSearch}
-        value={tableQuery?.search}
-        onClear={handleClear}
-        disabled={isDisabled}
-      />
-    );
-  }
-);
+  return (
+    <Search
+      {...props}
+      onChange={handleSearch}
+      value={tableQuery?.search}
+      onClear={handleClear}
+      disabled={isDisabled}
+    />
+  );
+}
 
-TableSearch.displayName = 'TableSearch';
+TableSearch.displayName = 'DataTable.Search';
diff --git a/packages/raystack/components/data-table/components/toolbar.tsx b/packages/raystack/components/data-table/components/toolbar.tsx
index 75d13011a..9669219f0 100644
--- a/packages/raystack/components/data-table/components/toolbar.tsx
+++ b/packages/raystack/components/data-table/components/toolbar.tsx
@@ -25,3 +25,5 @@ export function Toolbar<TData, TValue>({ className }: { className?: string }) {
     </Flex>
   );
 }
+
+Toolbar.displayName = 'DataTable.Toolbar';
diff --git a/packages/raystack/components/data-table/components/virtualized-content.tsx b/packages/raystack/components/data-table/components/virtualized-content.tsx
index 8321c7196..d6f3b5a9b 100644
--- a/packages/raystack/components/data-table/components/virtualized-content.tsx
+++ b/packages/raystack/components/data-table/components/virtualized-content.tsx
@@ -377,3 +377,5 @@ export function VirtualizedContent({
     </div>
   );
 }
+
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';
diff --git a/packages/raystack/components/data-table/data-table.tsx b/packages/raystack/components/data-table/data-table.tsx
index 9588d59a2..2e7c5516b 100644
--- a/packages/raystack/components/data-table/data-table.tsx
+++ b/packages/raystack/components/data-table/data-table.tsx
@@ -215,13 +215,11 @@ function DataTableRoot<TData, TValue>({
     stickyGroupHeader
   ]);
 
-  return (
-    <TableContext.Provider value={contextValue}>
-      {children}
-    </TableContext.Provider>
-  );
+  return <TableContext value={contextValue}>{children}</TableContext>;
 }
 
+DataTableRoot.displayName = 'DataTable';
+
 export const DataTable = Object.assign(DataTableRoot, {
   Content: Content,
   VirtualizedContent: VirtualizedContent,
diff --git a/packages/raystack/components/dialog/dialog-content.tsx b/packages/raystack/components/dialog/dialog-content.tsx
index 98c75eae2..4d9ea7c2a 100644
--- a/packages/raystack/components/dialog/dialog-content.tsx
+++ b/packages/raystack/components/dialog/dialog-content.tsx
@@ -2,7 +2,6 @@
 
 import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './dialog.module.css';
 import { CloseButton } from './dialog-misc';
 
@@ -17,51 +16,42 @@ export interface DialogContentProps extends DialogPrimitive.Popup.Props {
   showNestedAnimation?: boolean;
 }
 
-export const DialogContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Popup>,
-  DialogContentProps
->(
-  (
-    {
-      className,
-      children,
-      showCloseButton = true,
-      overlay,
-      width,
-      style,
-      showNestedAnimation = true,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Backdrop
-          {...overlay}
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlay,
+  width,
+  style,
+  showNestedAnimation = true,
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop
+        {...overlay}
+        className={cx(
+          styles.dialogOverlay,
+          overlay?.blur && styles.overlayBlur,
+          overlay?.className
+        )}
+      />
+      <DialogPrimitive.Viewport className={styles.viewport}>
+        <DialogPrimitive.Popup
           className={cx(
-            styles.dialogOverlay,
-            overlay?.blur && styles.overlayBlur,
-            overlay?.className
+            styles.dialogContent,
+            showNestedAnimation && styles.showNestedAnimation,
+            className
           )}
-        />
-        <DialogPrimitive.Viewport className={styles.viewport}>
-          <DialogPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.dialogContent,
-              showNestedAnimation && styles.showNestedAnimation,
-              className
-            )}
-            style={{ width, ...style }}
-            {...props}
-          >
-            {children}
-            {showCloseButton && <CloseButton className={styles.closeButton} />}
-          </DialogPrimitive.Popup>
-        </DialogPrimitive.Viewport>
-      </DialogPrimitive.Portal>
-    );
-  }
-);
+          style={{ width, ...style }}
+          {...props}
+        >
+          {children}
+          {showCloseButton && <CloseButton className={styles.closeButton} />}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPrimitive.Portal>
+  );
+}
 
 DialogContent.displayName = 'Dialog.Content';
diff --git a/packages/raystack/components/dialog/dialog-misc.tsx b/packages/raystack/components/dialog/dialog-misc.tsx
index fd07ce9b7..218948816 100644
--- a/packages/raystack/components/dialog/dialog-misc.tsx
+++ b/packages/raystack/components/dialog/dialog-misc.tsx
@@ -3,62 +3,64 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+import { type ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './dialog.module.css';
 
-export const DialogHeader = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
-  <Flex
-    justify='between'
-    align='center'
-    className={cx(styles.header, className)}
-    ref={ref}
-    {...props}
-  />
-));
+export function DialogHeader({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      justify='between'
+      align='center'
+      className={cx(styles.header, className)}
+      {...props}
+    />
+  );
+}
 
 DialogHeader.displayName = 'Dialog.Header';
 
-export const DialogFooter = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
-  <Flex
-    gap={5}
-    justify='end'
-    className={cx(styles.footer, className)}
-    ref={ref}
-    {...props}
-  />
-));
+export function DialogFooter({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      gap={5}
+      justify='end'
+      className={cx(styles.footer, className)}
+      {...props}
+    />
+  );
+}
 
 DialogFooter.displayName = 'Dialog.Footer';
 
-export const DialogBody = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
-  <Flex
-    direction='column'
-    gap={3}
-    className={cx(styles.body, className)}
-    ref={ref}
-    {...props}
-  />
-));
+export function DialogBody({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      direction='column'
+      gap={3}
+      className={cx(styles.body, className)}
+      {...props}
+    />
+  );
+}
 
 DialogBody.displayName = 'Dialog.Body';
 
-export const CloseButton = forwardRef<
-  ElementRef<typeof DialogPrimitive.Close>,
-  DialogPrimitive.Close.Props
->(({ className, ...props }, ref) => {
+export function CloseButton({
+  className,
+  ...props
+}: DialogPrimitive.Close.Props) {
   return (
     <DialogPrimitive.Close
-      ref={ref}
       className={cx(styles.close, className)}
       aria-label='Close dialog'
       {...props}
@@ -66,36 +68,31 @@ export const CloseButton = forwardRef<
       <Cross1Icon aria-hidden='true' />
     </DialogPrimitive.Close>
   );
-});
+}
 
 CloseButton.displayName = 'Dialog.CloseButton';
 
-export const DialogTitle = forwardRef<
-  ElementRef<typeof DialogPrimitive.Title>,
-  DialogPrimitive.Title.Props
->(({ className, ...props }, ref) => {
+export function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.Title.Props) {
   return (
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cx(styles.title, className)}
-      {...props}
-    />
+    <DialogPrimitive.Title className={cx(styles.title, className)} {...props} />
   );
-});
+}
 
 DialogTitle.displayName = 'Dialog.Title';
 
-export const DialogDescription = forwardRef<
-  ElementRef<typeof DialogPrimitive.Description>,
-  DialogPrimitive.Description.Props
->(({ className, ...props }, ref) => {
+export function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
-      ref={ref}
       className={cx(styles.description, className)}
       {...props}
     />
   );
-});
+}
 
 DialogDescription.displayName = 'Dialog.Description';
diff --git a/packages/raystack/components/drawer/drawer-content.tsx b/packages/raystack/components/drawer/drawer-content.tsx
index c316097ae..4d9676def 100644
--- a/packages/raystack/components/drawer/drawer-content.tsx
+++ b/packages/raystack/components/drawer/drawer-content.tsx
@@ -3,11 +3,9 @@
 import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
+import { ReactNode } from 'react';
 import styles from './drawer.module.css';
 
-type Side = 'top' | 'right' | 'bottom' | 'left';
-
 const drawerPopup = cva(styles.drawerPopup, {
   variants: {
     side: {
@@ -27,52 +25,43 @@ export interface DrawerContentProps
     VariantProps<typeof drawerPopup> {
   showCloseButton?: boolean;
   overlayProps?: DrawerPrimitive.Backdrop.Props;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-export const DrawerContent = forwardRef<
-  ElementRef<typeof DrawerPrimitive.Popup>,
-  DrawerContentProps
->(
-  (
-    {
-      className,
-      children,
-      side = 'right',
-      showCloseButton = true,
-      overlayProps,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <DrawerPrimitive.Portal>
-        <DrawerPrimitive.Backdrop
-          {...overlayProps}
-          className={cx(styles.backdrop, overlayProps?.className)}
-        />
-        <DrawerPrimitive.Viewport className={styles.viewport}>
-          <DrawerPrimitive.Popup
-            ref={ref}
-            className={drawerPopup({ side, className })}
-            aria-label='Drawer'
-            {...props}
-          >
-            <DrawerPrimitive.Content className={styles.content}>
-              {children}
-              {showCloseButton && (
-                <DrawerPrimitive.Close
-                  className={styles.close}
-                  aria-label='Close Drawer'
-                >
-                  <Cross1Icon aria-hidden='true' />
-                </DrawerPrimitive.Close>
-              )}
-            </DrawerPrimitive.Content>
-          </DrawerPrimitive.Popup>
-        </DrawerPrimitive.Viewport>
-      </DrawerPrimitive.Portal>
-    );
-  }
-);
+export function DrawerContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  overlayProps,
+  ...props
+}: DrawerContentProps) {
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Backdrop
+        {...overlayProps}
+        className={cx(styles.backdrop, overlayProps?.className)}
+      />
+      <DrawerPrimitive.Viewport className={styles.viewport}>
+        <DrawerPrimitive.Popup
+          className={drawerPopup({ side, className })}
+          aria-label='Drawer'
+          {...props}
+        >
+          <DrawerPrimitive.Content className={styles.content}>
+            {children}
+            {showCloseButton && (
+              <DrawerPrimitive.Close
+                className={styles.close}
+                aria-label='Close Drawer'
+              >
+                <Cross1Icon aria-hidden='true' />
+              </DrawerPrimitive.Close>
+            )}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
+  );
+}
 DrawerContent.displayName = 'Drawer.Content';
diff --git a/packages/raystack/components/drawer/drawer-misc.tsx b/packages/raystack/components/drawer/drawer-misc.tsx
index 785c4c5ec..3cd74a509 100644
--- a/packages/raystack/components/drawer/drawer-misc.tsx
+++ b/packages/raystack/components/drawer/drawer-misc.tsx
@@ -2,12 +2,7 @@
 
 import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 import { cx } from 'class-variance-authority';
-import {
-  type ElementRef,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode
-} from 'react';
+import { ComponentProps, type ReactNode } from 'react';
 import styles from './drawer.module.css';
 
 export const DrawerHeader = ({
@@ -19,42 +14,35 @@ export const DrawerHeader = ({
 }) => <div className={cx(styles.header, className)}>{children}</div>;
 DrawerHeader.displayName = 'Drawer.Header';
 
-export const DrawerTitle = forwardRef<
-  ElementRef<typeof DrawerPrimitive.Title>,
-  DrawerPrimitive.Title.Props
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cx(styles.title, className)}
-    {...props}
-  />
-));
+export function DrawerTitle({
+  className,
+  ...props
+}: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title className={cx(styles.title, className)} {...props} />
+  );
+}
 DrawerTitle.displayName = 'Drawer.Title';
 
-export const DrawerDescription = forwardRef<
-  ElementRef<typeof DrawerPrimitive.Description>,
-  DrawerPrimitive.Description.Props
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cx(styles.description, className)}
-    {...props}
-  />
-));
+export function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      className={cx(styles.description, className)}
+      {...props}
+    />
+  );
+}
 DrawerDescription.displayName = 'Drawer.Description';
 
-export const DrawerBody = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.body, className)} {...props} />
-));
+export function DrawerBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cx(styles.body, className)} {...props} />;
+}
 DrawerBody.displayName = 'Drawer.Body';
 
-export const DrawerFooter = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.footer, className)} {...props} />
-));
+export function DrawerFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cx(styles.footer, className)} {...props} />;
+}
 DrawerFooter.displayName = 'Drawer.Footer';
diff --git a/packages/raystack/components/drawer/drawer-root.tsx b/packages/raystack/components/drawer/drawer-root.tsx
index c841fa8ca..e30bb4f07 100644
--- a/packages/raystack/components/drawer/drawer-root.tsx
+++ b/packages/raystack/components/drawer/drawer-root.tsx
@@ -4,10 +4,13 @@ import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 
 type Side = 'top' | 'right' | 'bottom' | 'left';
 
-const sideToSwipeDirection: Record<Side, Side> = {
-  top: 'top',
+const sideToSwipeDirection: Record<
+  Side,
+  DrawerPrimitive.Root.Props['swipeDirection']
+> = {
+  top: 'up',
   right: 'right',
-  bottom: 'bottom',
+  bottom: 'down',
   left: 'left'
 };
 
diff --git a/packages/raystack/components/empty-state/empty-state.tsx b/packages/raystack/components/empty-state/empty-state.tsx
index 46ef7e3d7..63430485b 100644
--- a/packages/raystack/components/empty-state/empty-state.tsx
+++ b/packages/raystack/components/empty-state/empty-state.tsx
@@ -1,4 +1,5 @@
 import { cx } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 import { Flex } from '../flex';
 import { Text } from '../text';
 import styles from './empty-state.module.css';
@@ -10,28 +11,34 @@ type classNameKeys =
   | 'heading'
   | 'subHeading';
 
-interface EmptyStateProps {
-  icon: React.ReactNode;
-  heading?: React.ReactNode;
-  subHeading?: React.ReactNode;
-  primaryAction?: React.ReactNode;
-  secondaryAction?: React.ReactNode;
+interface EmptyStateProps extends ComponentProps<typeof Flex> {
+  icon: ReactNode;
+  heading?: ReactNode;
+  subHeading?: ReactNode;
+  primaryAction?: ReactNode;
+  secondaryAction?: ReactNode;
   classNames?: Partial<Record<classNameKeys, string>>;
   variant?: 'empty1' | 'empty2';
 }
 
-export const EmptyState = ({
+export function EmptyState({
   icon,
   heading,
   subHeading,
   primaryAction,
   secondaryAction,
   classNames,
-  variant = 'empty1'
-}: EmptyStateProps) => {
+  variant = 'empty1',
+  ...props
+}: EmptyStateProps) {
   if (variant === 'empty2') {
     return (
-      <Flex align='center' justify='center' className={styles.emptyStatePage}>
+      <Flex
+        align='center'
+        justify='center'
+        className={styles.emptyStatePage}
+        {...props}
+      >
         <Flex
           direction='column'
           align='start'
@@ -81,6 +88,7 @@ export const EmptyState = ({
       align='center'
       gap='medium'
       className={cx(styles.emptyState, classNames?.container)}
+      {...props}
     >
       <div className={cx(styles.iconContainer, classNames?.iconContainer)}>
         <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>
@@ -113,4 +121,6 @@ export const EmptyState = ({
       {secondaryAction}
     </Flex>
   );
-};
+}
+
+EmptyState.displayName = 'EmptyState';
diff --git a/packages/raystack/components/flex/flex.tsx b/packages/raystack/components/flex/flex.tsx
index e2a3acd8d..e7aa94c7c 100644
--- a/packages/raystack/components/flex/flex.tsx
+++ b/packages/raystack/components/flex/flex.tsx
@@ -1,6 +1,5 @@
 import { mergeProps, useRender } from '@base-ui/react';
 import { cva, VariantProps } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './flex.module.css';
 
 const flex = cva(styles.flex, {
@@ -59,40 +58,38 @@ const flex = cva(styles.flex, {
 
 type BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;
 
-export const Flex = forwardRef<HTMLDivElement, BoxProps>(
-  (
-    {
+export function Flex({
+  direction,
+  align,
+  justify,
+  wrap,
+  gap,
+  className,
+  width,
+  render,
+  ref,
+  ...props
+}: BoxProps) {
+  const flexProps = {
+    className: flex({
       direction,
       align,
       justify,
       wrap,
       gap,
       className,
-      width,
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const flexProps = {
-      className: flex({
-        direction,
-        align,
-        justify,
-        wrap,
-        gap,
-        className,
-        width
-      })
-    };
+      width
+    })
+  };
 
-    const element = useRender({
-      defaultTagName: 'div',
-      ref,
-      render,
-      props: mergeProps<'div'>(flexProps, props)
-    });
+  const element = useRender({
+    defaultTagName: 'div',
+    ref,
+    render,
+    props: mergeProps<'div'>(flexProps, props)
+  });
 
-    return element;
-  }
-);
+  return element;
+}
+
+Flex.displayName = 'Flex';
diff --git a/packages/raystack/components/grid/grid-item.tsx b/packages/raystack/components/grid/grid-item.tsx
index 18cc77d12..1078f61e6 100644
--- a/packages/raystack/components/grid/grid-item.tsx
+++ b/packages/raystack/components/grid/grid-item.tsx
@@ -1,5 +1,4 @@
 import { mergeProps, useRender } from '@base-ui/react';
-import { forwardRef } from 'react';
 import { AlignType } from './types';
 
 type GridItemProps = useRender.ComponentProps<'div'> & {
@@ -14,46 +13,42 @@ type GridItemProps = useRender.ComponentProps<'div'> & {
   alignSelf?: AlignType;
 };
 
-export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
-  (
-    {
-      area,
-      colStart,
-      colEnd,
-      rowStart,
-      rowEnd,
-      colSpan,
-      rowSpan,
-      justifySelf,
-      alignSelf,
-      style,
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const gridItemStyle = {
-      gridArea: area,
-      gridColumnStart: colStart,
-      gridColumnEnd: colEnd,
-      gridRowStart: rowStart,
-      gridRowEnd: rowEnd,
-      gridColumn: colSpan ? `span ${colSpan}` : undefined,
-      gridRow: rowSpan ? `span ${rowSpan}` : undefined,
-      justifySelf,
-      alignSelf,
-      ...style
-    };
+export function GridItem({
+  area,
+  colStart,
+  colEnd,
+  rowStart,
+  rowEnd,
+  colSpan,
+  rowSpan,
+  justifySelf,
+  alignSelf,
+  style,
+  render,
+  ref,
+  ...props
+}: GridItemProps) {
+  const gridItemStyle = {
+    gridArea: area,
+    gridColumnStart: colStart,
+    gridColumnEnd: colEnd,
+    gridRowStart: rowStart,
+    gridRowEnd: rowEnd,
+    gridColumn: colSpan ? `span ${colSpan}` : undefined,
+    gridRow: rowSpan ? `span ${rowSpan}` : undefined,
+    justifySelf,
+    alignSelf,
+    ...style
+  };
 
-    const element = useRender({
-      defaultTagName: 'div',
-      ref,
-      render,
-      props: mergeProps<'div'>({ style: gridItemStyle }, props)
-    });
+  const element = useRender({
+    defaultTagName: 'div',
+    ref,
+    render,
+    props: mergeProps<'div'>({ style: gridItemStyle }, props)
+  });
 
-    return element;
-  }
-);
+  return element;
+}
 
-GridItem.displayName = 'GridItem';
+GridItem.displayName = 'Grid.Item';
diff --git a/packages/raystack/components/grid/grid.tsx b/packages/raystack/components/grid/grid.tsx
index 77cc55b88..74f80696e 100644
--- a/packages/raystack/components/grid/grid.tsx
+++ b/packages/raystack/components/grid/grid.tsx
@@ -1,5 +1,5 @@
 import { mergeProps, useRender } from '@base-ui/react';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { AlignExtendedType, AlignType } from './types';
 
 const GAPS = {
@@ -56,71 +56,67 @@ type GridProps = useRender.ComponentProps<'div'> & {
   inline?: boolean;
 };
 
-export const Grid = forwardRef<HTMLDivElement, GridProps>(
-  (
-    {
-      templateAreas,
-      autoFlow,
-      autoColumns,
-      autoRows,
-      columns,
-      rows,
-      gap,
-      columnGap,
-      rowGap,
-      justifyItems,
-      alignItems,
-      justifyContent,
-      alignContent,
-      inline = false,
-      style = {},
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const gridTemplateColumns =
-      typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
-    const gridTemplateRows =
-      typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
+export function Grid({
+  templateAreas,
+  autoFlow,
+  autoColumns,
+  autoRows,
+  columns,
+  rows,
+  gap,
+  columnGap,
+  rowGap,
+  justifyItems,
+  alignItems,
+  justifyContent,
+  alignContent,
+  inline = false,
+  style = {},
+  render,
+  ref,
+  ...props
+}: GridProps) {
+  const gridTemplateColumns =
+    typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
+  const gridTemplateRows =
+    typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
 
-    const gridTemplateAreas = useMemo(() => {
-      if (Array.isArray(templateAreas)) {
-        return templateAreas
-          .map(area => `"${area}"`)
-          .join(' ')
-          .trim();
-      }
-      return templateAreas;
-    }, [templateAreas]);
+  const gridTemplateAreas = useMemo(() => {
+    if (Array.isArray(templateAreas)) {
+      return templateAreas
+        .map(area => `"${area}"`)
+        .join(' ')
+        .trim();
+    }
+    return templateAreas;
+  }, [templateAreas]);
 
-    const gridStyle = {
-      display: inline ? 'inline-grid' : 'grid',
-      gridTemplateAreas,
-      gridAutoFlow: autoFlow,
-      gridAutoColumns: autoColumns,
-      gridAutoRows: autoRows,
-      gridTemplateColumns,
-      gridTemplateRows,
-      gap: gap && GAPS[gap],
-      columnGap: columnGap && GAPS[columnGap],
-      rowGap: rowGap && GAPS[rowGap],
-      justifyItems,
-      alignItems,
-      justifyContent,
-      alignContent,
-      ...style
-    };
+  const gridStyle = {
+    display: inline ? 'inline-grid' : 'grid',
+    gridTemplateAreas,
+    gridAutoFlow: autoFlow,
+    gridAutoColumns: autoColumns,
+    gridAutoRows: autoRows,
+    gridTemplateColumns,
+    gridTemplateRows,
+    gap: gap && GAPS[gap],
+    columnGap: columnGap && GAPS[columnGap],
+    rowGap: rowGap && GAPS[rowGap],
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    ...style
+  };
 
-    const element = useRender({
-      defaultTagName: 'div',
-      ref,
-      render,
-      props: mergeProps<'div'>({ style: gridStyle }, props)
-    });
+  const element = useRender({
+    defaultTagName: 'div',
+    ref,
+    render,
+    props: mergeProps<'div'>({ style: gridStyle }, props)
+  });
 
-    return element;
-  }
-);
+  return element;
+}
 
 Grid.displayName = 'Grid';
diff --git a/packages/raystack/components/headline/headline.tsx b/packages/raystack/components/headline/headline.tsx
index 2e2b2ea47..dd09a72b1 100644
--- a/packages/raystack/components/headline/headline.tsx
+++ b/packages/raystack/components/headline/headline.tsx
@@ -1,6 +1,5 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { HTMLAttributes, forwardRef } from 'react';
-
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 import styles from './headline.module.css';
 
 const headline = cva(styles.headline, {
@@ -43,31 +42,25 @@ export type HeadlineBaseProps = VariantProps<typeof headline> & {
 };
 
 type HeadlineProps = HeadlineBaseProps &
-  HTMLAttributes<HTMLHeadingElement> & {
+  ComponentProps<'h1'> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   };
 
-export const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(
-  (
-    {
-      className,
-      size,
-      weight,
-      align,
-      truncate,
-      as: Component = 'h2',
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Component
-        ref={ref}
-        className={headline({ size, weight, align, truncate, className })}
-        {...props}
-      />
-    );
-  }
-);
+export function Headline({
+  className,
+  size,
+  weight,
+  align,
+  truncate,
+  as: Component = 'h2',
+  ...props
+}: HeadlineProps) {
+  return (
+    <Component
+      className={headline({ size, weight, align, truncate, className })}
+      {...props}
+    />
+  );
+}
 
 Headline.displayName = 'Headline';
diff --git a/packages/raystack/components/icon-button/icon-button.tsx b/packages/raystack/components/icon-button/icon-button.tsx
index ecc36f2fd..c524ccde7 100644
--- a/packages/raystack/components/icon-button/icon-button.tsx
+++ b/packages/raystack/components/icon-button/icon-button.tsx
@@ -1,7 +1,6 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
-
 import styles from './icon-button.module.css';
 
 const iconButton = cva(styles.iconButton, {
@@ -19,27 +18,23 @@ const iconButton = cva(styles.iconButton, {
 });
 
 export interface IconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends ComponentProps<'button'>,
     VariantProps<typeof iconButton> {
   size?: 1 | 2 | 3 | 4;
   'aria-label'?: string;
 }
 
-export const IconButton = forwardRef<ElementRef<'button'>, IconButtonProps>(
-  (
-    {
-      className,
-      size,
-      disabled,
-      children,
-      'aria-label': ariaLabel,
-      style,
-      ...props
-    },
-    ref
-  ) => (
+export function IconButton({
+  className,
+  size,
+  disabled,
+  children,
+  'aria-label': ariaLabel,
+  style,
+  ...props
+}: IconButtonProps) {
+  return (
     <button
-      ref={ref}
       className={iconButton({ size, className })}
       disabled={disabled}
       type='button'
@@ -52,7 +47,7 @@ export const IconButton = forwardRef<ElementRef<'button'>, IconButtonProps>(
         {children}
       </Flex>
     </button>
-  )
-);
+  );
+}
 
 IconButton.displayName = 'IconButton';

From 9c2c71b6050a6a4afe34f71ce85a05c4dd228bfe Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 03:30:10 +0530
Subject: [PATCH 05/11] feat: migrate react 19 - 4

---
 packages/raystack/components/image/image.tsx  |  14 +-
 .../components/indicator/indicator.tsx        |  50 ++-
 .../components/input-field/input-field.tsx    | 227 +++++++------
 packages/raystack/components/label/label.tsx  |  51 +--
 packages/raystack/components/link/link.tsx    |  93 +++---
 packages/raystack/components/list/list.tsx    |  22 +-
 packages/raystack/components/menu/cell.tsx    |  24 +-
 .../raystack/components/menu/menu-content.tsx | 298 +++++++++---------
 .../raystack/components/menu/menu-item.tsx    |  70 ++--
 .../raystack/components/menu/menu-misc.tsx    |  70 ++--
 .../raystack/components/menu/menu-root.tsx    |  10 +-
 .../raystack/components/menu/menu-trigger.tsx | 153 +++++----
 .../raystack/components/menubar/menubar.tsx   |  21 +-
 .../raystack/components/meter/meter-misc.tsx  |  41 ++-
 .../raystack/components/meter/meter-root.tsx  |  75 ++---
 .../raystack/components/meter/meter-track.tsx |  22 +-
 .../components/navbar/navbar-root.tsx         |  40 +--
 .../components/navbar/navbar-sections.tsx     |  35 +-
 18 files changed, 631 insertions(+), 685 deletions(-)

diff --git a/packages/raystack/components/image/image.tsx b/packages/raystack/components/image/image.tsx
index 57b5c04b9..ae9e5cff9 100644
--- a/packages/raystack/components/image/image.tsx
+++ b/packages/raystack/components/image/image.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ImgHTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, SyntheticEvent } from 'react';
 
 import styles from './image.module.css';
 
@@ -25,12 +25,8 @@ const image = cva(styles.image, {
   }
 });
 
-interface ImageProps
-  extends ImgHTMLAttributes<HTMLImageElement>,
-    VariantProps<typeof image> {
+interface ImageProps extends ComponentProps<'img'>, VariantProps<typeof image> {
   fallback?: string;
-  width?: string | number;
-  height?: string | number;
 }
 
 export function Image({
@@ -47,9 +43,7 @@ export function Image({
   decoding = 'async',
   ...props
 }: ImageProps) {
-  const handleError = (
-    event: React.SyntheticEvent<HTMLImageElement, Event>
-  ) => {
+  const handleError = (event: SyntheticEvent<HTMLImageElement, Event>) => {
     if (fallback) {
       event.currentTarget.src = fallback;
     }
diff --git a/packages/raystack/components/indicator/indicator.tsx b/packages/raystack/components/indicator/indicator.tsx
index 8fbc0a660..d78f82688 100644
--- a/packages/raystack/components/indicator/indicator.tsx
+++ b/packages/raystack/components/indicator/indicator.tsx
@@ -1,61 +1,55 @@
-import { cva, VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 
 import styles from './indicator.module.css';
 
 const indicator = cva(styles.indicator, {
   variants: {
     variant: {
-      accent: styles["indicator-variant-accent"],
-      warning: styles["indicator-variant-warning"],
-      danger: styles["indicator-variant-danger"],
-      success: styles["indicator-variant-success"],
-      neutral: styles["indicator-variant-neutral"],
+      accent: styles['indicator-variant-accent'],
+      warning: styles['indicator-variant-warning'],
+      danger: styles['indicator-variant-danger'],
+      success: styles['indicator-variant-success'],
+      neutral: styles['indicator-variant-neutral']
     }
   },
   defaultVariants: {
-    variant: "accent",
-  },
+    variant: 'accent'
+  }
 });
 
 export interface IndicatorProps
-  extends ComponentPropsWithoutRef<"div">,
+  extends ComponentProps<'div'>,
     VariantProps<typeof indicator> {
   label?: string;
   children?: ReactNode;
-  "aria-label"?: string;
+  'aria-label'?: string;
 }
 
-export const Indicator = ({ 
-  className, 
-  variant, 
-  label, 
-  children, 
-  "aria-label": ariaLabel,
-  ...props 
+export const Indicator = ({
+  className,
+  variant,
+  label,
+  children,
+  'aria-label': ariaLabel,
+  ...props
 }: IndicatorProps) => {
   const accessibilityLabel = ariaLabel || label || `${variant} indicator`;
 
   return (
     <div className={styles.wrapper} {...props}>
       {children}
-      <div 
+      <div
         className={indicator({ variant, className })}
-        role="status"
+        role='status'
         aria-label={accessibilityLabel}
       >
         {label ? (
-          <span 
-            className={styles.label} 
-            data-length={label.length.toString()}
-          >
+          <span className={styles.label} data-length={label.length.toString()}>
             {label}
           </span>
         ) : (
-          <span 
-            className={styles.dot} 
-            aria-hidden="true" 
-          />
+          <span className={styles.dot} aria-hidden='true' />
         )}
       </div>
     </div>
diff --git a/packages/raystack/components/input-field/input-field.tsx b/packages/raystack/components/input-field/input-field.tsx
index d5b5847b3..026c29931 100644
--- a/packages/raystack/components/input-field/input-field.tsx
+++ b/packages/raystack/components/input-field/input-field.tsx
@@ -2,12 +2,7 @@
 
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  ReactNode,
-  RefObject
-} from 'react';
+import { ComponentProps, ReactNode, RefObject } from 'react';
 import { Chip } from '../chip';
 import { Tooltip } from '../tooltip';
 import styles from './input-field.module.css';
@@ -32,7 +27,7 @@ const inputWrapper = cva(styles.inputWrapper, {
 });
 
 export interface InputFieldProps
-  extends Omit<ComponentPropsWithoutRef<'input'>, 'error' | 'size'>,
+  extends Omit<ComponentProps<'input'>, 'error' | 'size'>,
     VariantProps<typeof inputWrapper> {
   label?: string;
   helperText?: string;
@@ -51,124 +46,118 @@ export interface InputFieldProps
   containerRef?: RefObject<HTMLDivElement | null>;
 }
 
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  (
-    {
-      className,
-      disabled,
-      label,
-      helperText,
-      placeholder,
-      error,
-      leadingIcon,
-      trailingIcon,
-      optional,
-      prefix,
-      suffix,
-      width,
-      chips,
-      maxChipsVisible = 2,
-      size,
-      infoTooltip,
-      variant = 'default',
-      containerRef,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <div className={styles.container} style={{ width: width || '100%' }}>
-        {label && (
-          <div className={styles.labelContainer}>
-            <label
-              className={cx(styles.label, disabled && styles['label-disabled'])}
-            >
-              {label}
-              {optional && <span className={styles.optional}>(optional)</span>}
-            </label>
-            {infoTooltip && (
-              <Tooltip>
-                <Tooltip.Trigger
-                  render={
-                    <span className={styles.helpIcon}>
-                      <InfoCircledIcon />
-                    </span>
-                  }
-                />
-                <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
-              </Tooltip>
-            )}
-          </div>
-        )}
-        <div
-          className={cx(
-            inputWrapper({ size, variant, className }),
-            error && styles['input-error-wrapper'],
-            disabled && styles['input-disabled-wrapper'],
-            chips?.length && styles['has-chips']
-          )}
-          ref={containerRef}
-        >
-          {leadingIcon && (
-            <div className={styles['leading-icon']}>{leadingIcon}</div>
+export function InputField({
+  className,
+  disabled,
+  label,
+  helperText,
+  placeholder,
+  error,
+  leadingIcon,
+  trailingIcon,
+  optional,
+  prefix,
+  suffix,
+  width,
+  chips,
+  maxChipsVisible = 2,
+  size,
+  infoTooltip,
+  variant = 'default',
+  containerRef,
+  ...props
+}: InputFieldProps) {
+  return (
+    <div className={styles.container} style={{ width: width || '100%' }}>
+      {label && (
+        <div className={styles.labelContainer}>
+          <label
+            className={cx(styles.label, disabled && styles['label-disabled'])}
+          >
+            {label}
+            {optional && <span className={styles.optional}>(optional)</span>}
+          </label>
+          {infoTooltip && (
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <span className={styles.helpIcon}>
+                    <InfoCircledIcon />
+                  </span>
+                }
+              />
+              <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
+            </Tooltip>
           )}
-          {prefix && <div className={styles.prefix}>{prefix}</div>}
-
-          <div className={styles['chip-input-container']}>
-            {chips?.slice(0, maxChipsVisible).map((chip, index) => (
-              <Chip
-                key={index}
-                variant='outline'
-                isDismissible={!!chip.onRemove}
-                onDismiss={chip.onRemove}
-                className={styles.chip}
-              >
-                {chip.label}
-              </Chip>
-            ))}
-            {chips && chips.length > maxChipsVisible && (
-              <span className={styles['chip-overflow']}>
-                +{chips.length - maxChipsVisible}
-              </span>
-            )}
-            <input
-              ref={ref}
-              className={cx(
-                styles['input-field'],
-                leadingIcon && styles['has-leading-icon'],
-                trailingIcon && styles['has-trailing-icon'],
-                prefix && styles['has-prefix'],
-                suffix && styles['has-suffix'],
-                error && styles['input-error'],
-                disabled && styles['input-disabled'],
-                className
-              )}
-              aria-invalid={!!error}
-              placeholder={placeholder}
-              disabled={disabled}
-              {...props}
-            />
-          </div>
+        </div>
+      )}
+      <div
+        className={cx(
+          inputWrapper({ size, variant, className }),
+          error && styles['input-error-wrapper'],
+          disabled && styles['input-disabled-wrapper'],
+          chips?.length && styles['has-chips']
+        )}
+        ref={containerRef}
+      >
+        {leadingIcon && (
+          <div className={styles['leading-icon']}>{leadingIcon}</div>
+        )}
+        {prefix && <div className={styles.prefix}>{prefix}</div>}
 
-          {suffix && <div className={styles.suffix}>{suffix}</div>}
-          {trailingIcon && (
-            <div className={styles['trailing-icon']}>{trailingIcon}</div>
+        <div className={styles['chip-input-container']}>
+          {chips?.slice(0, maxChipsVisible).map((chip, index) => (
+            <Chip
+              key={index}
+              variant='outline'
+              isDismissible={!!chip.onRemove}
+              onDismiss={chip.onRemove}
+              className={styles.chip}
+            >
+              {chip.label}
+            </Chip>
+          ))}
+          {chips && chips.length > maxChipsVisible && (
+            <span className={styles['chip-overflow']}>
+              +{chips.length - maxChipsVisible}
+            </span>
           )}
-        </div>
-        {(error || helperText) && (
-          <span
+          <input
             className={cx(
-              styles['helper-text'],
-              error && styles['helper-text-error'],
-              disabled && styles['helper-text-disabled']
+              styles['input-field'],
+              leadingIcon && styles['has-leading-icon'],
+              trailingIcon && styles['has-trailing-icon'],
+              prefix && styles['has-prefix'],
+              suffix && styles['has-suffix'],
+              error && styles['input-error'],
+              disabled && styles['input-disabled'],
+              className
             )}
-          >
-            {error || helperText}
-          </span>
+            aria-invalid={!!error}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...props}
+          />
+        </div>
+
+        {suffix && <div className={styles.suffix}>{suffix}</div>}
+        {trailingIcon && (
+          <div className={styles['trailing-icon']}>{trailingIcon}</div>
         )}
       </div>
-    );
-  }
-);
+      {(error || helperText) && (
+        <span
+          className={cx(
+            styles['helper-text'],
+            error && styles['helper-text-error'],
+            disabled && styles['helper-text-disabled']
+          )}
+        >
+          {error || helperText}
+        </span>
+      )}
+    </div>
+  );
+}
 
 InputField.displayName = 'InputField';
diff --git a/packages/raystack/components/label/label.tsx b/packages/raystack/components/label/label.tsx
index 40c8e59eb..e50f36959 100644
--- a/packages/raystack/components/label/label.tsx
+++ b/packages/raystack/components/label/label.tsx
@@ -1,40 +1,41 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, PropsWithChildren } from 'react';
 
-import styles from "./label.module.css";
+import styles from './label.module.css';
 
 const label = cva(styles.label, {
   variants: {
     size: {
-      small: styles["label-small"],
-      medium: styles["label-medium"],
-      large: styles["label-large"],
+      small: styles['label-small'],
+      medium: styles['label-medium'],
+      large: styles['label-large']
     },
     required: {
-      true: styles["label-required"],
+      true: styles['label-required']
     }
   },
   defaultVariants: {
-    size: "small",
-    required: false,
-  },
+    size: 'small',
+    required: false
+  }
 });
 
-interface LabelProps extends PropsWithChildren<VariantProps<typeof label>>, 
-  Omit<HTMLAttributes<HTMLLabelElement>, 'required'> {
+interface LabelProps
+  extends PropsWithChildren<VariantProps<typeof label>>,
+    Omit<ComponentProps<'label'>, 'required'> {
   required?: boolean;
   requiredIndicator?: string;
   htmlFor?: string;
 }
 
-export function Label({ 
-  children, 
-  className, 
-  size, 
-  required, 
-  requiredIndicator = "*",
+export function Label({
+  children,
+  className,
+  size,
+  required,
+  requiredIndicator = '*',
   htmlFor,
-  ...props 
+  ...props
 }: LabelProps) {
   return (
     <label
@@ -44,10 +45,10 @@ export function Label({
     >
       {children}
       {required && (
-        <span 
-          className={styles["required-indicator"]} 
-          aria-hidden="true"
-          role="presentation"
+        <span
+          className={styles['required-indicator']}
+          aria-hidden='true'
+          role='presentation'
         >
           {requiredIndicator}
         </span>
@@ -56,4 +57,6 @@ export function Label({
   );
 }
 
-export type { LabelProps }; 
\ No newline at end of file
+Label.displayName = 'Label';
+
+export type { LabelProps };
diff --git a/packages/raystack/components/link/link.tsx b/packages/raystack/components/link/link.tsx
index 37e94204c..95009982b 100644
--- a/packages/raystack/components/link/link.tsx
+++ b/packages/raystack/components/link/link.tsx
@@ -1,59 +1,52 @@
-import { AnchorHTMLAttributes, forwardRef } from "react";
-import { cx } from "class-variance-authority";
-import { Text, type TextBaseProps } from "../text";
-import styles from "./link.module.css";
+import { cx } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+import { Text, type TextBaseProps } from '../text';
+import styles from './link.module.css';
 
-export interface LinkProps
-  extends TextBaseProps,
-    AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends TextBaseProps, ComponentProps<'a'> {
   href: string;
   external?: boolean;
   download?: boolean | string;
 }
 
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      children,
-      className,
-      variant = "accent",
-      size = "small",
-      external,
-      download,
-      ...props
-    },
-    ref,
-  ) => {
-    const externalProps = external
-      ? {
-          target: "_blank",
-          rel: "noopener noreferrer",
-          "aria-label": `${children} (opens in new tab)`,
-        }
-      : {};
+export function Link({
+  children,
+  className,
+  variant = 'accent',
+  size = 'small',
+  external,
+  download,
+  ...props
+}: LinkProps) {
+  const externalProps = external
+    ? {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        'aria-label': `${children} (opens in new tab)`
+      }
+    : {};
 
-    const downloadProps = download
-      ? {
-          download: typeof download === "string" ? download : true,
-          "aria-label": `${children} (download)`,
-        }
-      : {};
+  const downloadProps = download
+    ? {
+        download: typeof download === 'string' ? download : true,
+        'aria-label': `${children} (download)`
+      }
+    : {};
 
-    return (
-      <Text
-        ref={ref}
-        className={cx(styles.link, className)}
-        variant={variant}
-        size={size}
-        role="link"
-        {...externalProps}
-        {...downloadProps}
-        {...props}
-        as="a">
-        {children}
-      </Text>
-    );
-  },
-);
+  return (
+    <Text
+      className={cx(styles.link, className)}
+      variant={variant}
+      size={size}
+      role='link'
+      {...externalProps}
+      {...downloadProps}
+      {...props}
+      as='a'
+    >
+      {children}
+    </Text>
+  );
+}
 
-Link.displayName = "Link";
+Link.displayName = 'Link';
diff --git a/packages/raystack/components/list/list.tsx b/packages/raystack/components/list/list.tsx
index 8a01174f2..d4fcd6961 100644
--- a/packages/raystack/components/list/list.tsx
+++ b/packages/raystack/components/list/list.tsx
@@ -1,5 +1,5 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 
 import styles from './list.module.css';
 
@@ -11,26 +11,26 @@ const header = cva(styles.header);
 const headerText = cva(styles['header-text']);
 
 interface ListRootProps
-  extends ComponentPropsWithoutRef<'ul'>,
+  extends ComponentProps<'ul'>,
     VariantProps<typeof list> {
   children: ReactNode;
   maxWidth?: string | number;
 }
 
-interface ListItemProps extends ComponentPropsWithoutRef<'li'> {
+interface ListItemProps extends ComponentProps<'li'> {
   children: ReactNode;
 }
 
-interface ListLabelProps extends ComponentPropsWithoutRef<'span'> {
+interface ListLabelProps extends ComponentProps<'span'> {
   minWidth?: string;
   children: ReactNode;
 }
 
-interface ListValueProps extends ComponentPropsWithoutRef<'span'> {
+interface ListValueProps extends ComponentProps<'span'> {
   children: ReactNode;
 }
 
-interface ListHeaderProps extends ComponentPropsWithoutRef<'div'> {
+interface ListHeaderProps extends ComponentProps<'div'> {
   children: ReactNode;
 }
 
@@ -102,10 +102,10 @@ const ListHeader = ({ children, className, ...props }: ListHeaderProps) => {
 };
 
 ListRoot.displayName = 'List';
-ListHeader.displayName = 'ListHeader';
-ListItem.displayName = 'ListItem';
-ListLabel.displayName = 'ListLabel';
-ListValue.displayName = 'ListValue';
+ListHeader.displayName = 'List.Header';
+ListItem.displayName = 'List.Item';
+ListLabel.displayName = 'List.Label';
+ListValue.displayName = 'List.Value';
 
 export const List = Object.assign(ListRoot, {
   Header: ListHeader,
diff --git a/packages/raystack/components/menu/cell.tsx b/packages/raystack/components/menu/cell.tsx
index 55652fe87..5ce559aab 100644
--- a/packages/raystack/components/menu/cell.tsx
+++ b/packages/raystack/components/menu/cell.tsx
@@ -1,28 +1,32 @@
 import { cx } from 'class-variance-authority';
-import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import styles from './cell.module.css';
 
 export type CellBaseProps = {
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
 };
-export type CellProps = HTMLAttributes<HTMLDivElement> &
+export type CellProps = ComponentProps<'div'> &
   CellBaseProps & {
     type?: 'select' | 'item';
   };
 
-export const Cell = forwardRef<HTMLDivElement, CellProps>(
-  (
-    { className, children, leadingIcon, trailingIcon, type = 'item', ...props },
-    ref
-  ) => (
-    <div ref={ref} {...props} className={cx(styles.cell, className)}>
+export function Cell({
+  className,
+  children,
+  leadingIcon,
+  trailingIcon,
+  type = 'item',
+  ...props
+}: CellProps) {
+  return (
+    <div {...props} className={cx(styles.cell, className)}>
       {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}
       {children}
       {trailingIcon && (
         <span className={styles.trailingIcon}>{trailingIcon}</span>
       )}
     </div>
-  )
-);
+  );
+}
 Cell.displayName = 'Menu.Cell';
diff --git a/packages/raystack/components/menu/menu-content.tsx b/packages/raystack/components/menu/menu-content.tsx
index 0f2505d84..5b508e474 100644
--- a/packages/raystack/components/menu/menu-content.tsx
+++ b/packages/raystack/components/menu/menu-content.tsx
@@ -5,7 +5,7 @@ import {
   Menu as MenuPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, KeyboardEvent, useCallback, useRef } from 'react';
+import { KeyboardEvent, useCallback, useRef } from 'react';
 import styles from './menu.module.css';
 import { useMenuContext } from './menu-root';
 import {
@@ -24,76 +24,58 @@ export interface MenuContentProps
   searchPlaceholder?: string;
 }
 
-export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
-  (
-    {
-      className,
-      children,
-      searchPlaceholder = 'Search...',
-      render,
-      finalFocus,
-      style,
-      sideOffset = 4,
-      align = 'start',
-      onFocus,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    const {
-      autocomplete,
-      inputValue,
-      onInputValueChange,
-      inputRef,
-      isInitialRender,
-      parent
-    } = useMenuContext();
+export function MenuContent({
+  ref,
+  className,
+  children,
+  searchPlaceholder = 'Search...',
+  render,
+  finalFocus,
+  style,
+  sideOffset = 4,
+  align = 'start',
+  onFocus,
+  ...positionerProps
+}: MenuContentProps) {
+  const {
+    autocomplete,
+    inputValue,
+    onInputValueChange,
+    inputRef,
+    isInitialRender,
+    parent
+  } = useMenuContext();
+
+  const focusInput = useCallback(() => {
+    if (document?.activeElement !== inputRef?.current)
+      inputRef?.current?.focus();
+  }, [inputRef]);
+  const highlightedItem = useRef<
+    [index: number, reason: 'keyboard' | 'pointer' | 'none']
+  >([-1, 'none']);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-    const focusInput = useCallback(() => {
-      if (document?.activeElement !== inputRef?.current)
-        inputRef?.current?.focus();
-    }, [inputRef]);
-    const highlightedItem = useRef<
-      [index: number, reason: 'keyboard' | 'pointer' | 'none']
-    >([-1, 'none']);
-    const containerRef = useRef<HTMLDivElement>(null);
+  const highlightFirstItem = useCallback(() => {
+    if (!isInitialRender?.current) return;
+    isInitialRender.current = false;
+    const item = containerRef.current?.querySelector('[role="option"]');
+    if (!item) return;
+    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+  }, [isInitialRender]);
 
-    const highlightFirstItem = useCallback(() => {
-      if (!isInitialRender?.current) return;
-      isInitialRender.current = false;
-      const item = containerRef.current?.querySelector('[role="option"]');
-      if (!item) return;
-      item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
-    }, [isInitialRender]);
+  const checkAndOpenSubMenu = useCallback(() => {
+    if (highlightedItem.current[0] === -1) return;
+    const items = containerRef.current?.querySelectorAll('[role="option"]');
+    const item = items?.[highlightedItem.current[0]];
+    if (!item || !isElementSubMenuTrigger(item)) return;
+    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+  }, []);
 
-    const checkAndOpenSubMenu = useCallback(() => {
+  const checkAndCloseSubMenu = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
       if (highlightedItem.current[0] === -1) return;
       const items = containerRef.current?.querySelectorAll('[role="option"]');
       const item = items?.[highlightedItem.current[0]];
-      if (!item || !isElementSubMenuTrigger(item)) return;
-      dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
-    }, []);
-
-    const checkAndCloseSubMenu = useCallback(
-      (e: KeyboardEvent<HTMLInputElement>) => {
-        if (highlightedItem.current[0] === -1) return;
-        const items = containerRef.current?.querySelectorAll('[role="option"]');
-        const item = items?.[highlightedItem.current[0]];
-        if (
-          !item ||
-          !isElementSubMenuTrigger(item) ||
-          !isElementSubMenuOpen(item)
-        )
-          return;
-        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
-        e.stopPropagation();
-      },
-      []
-    );
-
-    const blurStaleMenuItem = useCallback((index: number) => {
-      const items = containerRef.current?.querySelectorAll('[role="option"]');
-      const item = items?.[index];
       if (
         !item ||
         !isElementSubMenuTrigger(item) ||
@@ -101,97 +83,107 @@ export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
       )
         return;
       dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
-      item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
-    }, []);
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const blurStaleMenuItem = useCallback((index: number) => {
+    const items = containerRef.current?.querySelectorAll('[role="option"]');
+    const item = items?.[index];
+    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))
+      return;
+    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+  }, []);
 
-    return (
-      <MenuPrimitive.Portal>
-        <MenuPrimitive.Positioner
-          className={styles.positioner}
-          sideOffset={sideOffset}
-          align={align}
-          {...positionerProps}
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className={styles.positioner}
+        sideOffset={sideOffset}
+        align={align}
+        {...positionerProps}
+      >
+        <MenuPrimitive.Popup
+          ref={ref}
+          className={cx(
+            styles.content,
+            autocomplete && styles.comboboxContainer,
+            className
+          )}
+          style={style}
+          render={render}
+          finalFocus={finalFocus}
+          role={autocomplete ? 'dialog' : 'menu'}
+          onFocus={
+            autocomplete || parent?.autocomplete
+              ? e => {
+                  focusInput();
+                  e.stopPropagation();
+                  highlightFirstItem();
+                  onFocus?.(e);
+                }
+              : undefined
+          }
         >
-          <MenuPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.content,
-              autocomplete && styles.comboboxContainer,
-              className
-            )}
-            style={style}
-            render={render}
-            finalFocus={finalFocus}
-            role={autocomplete ? 'dialog' : 'menu'}
-            onFocus={
-              autocomplete || parent?.autocomplete
-                ? e => {
-                    focusInput();
-                    e.stopPropagation();
-                    highlightFirstItem();
-                    onFocus?.(e);
-                  }
-                : undefined
-            }
-          >
-            {autocomplete ? (
-              <AutocompletePrimitive.Root
-                inline
-                open
-                value={inputValue}
-                onValueChange={(value: string) => onInputValueChange?.(value)}
-                autoHighlight={!!inputValue?.length}
-                mode='none'
-                loopFocus={false}
-                onItemHighlighted={(value, eventDetails) => {
-                  if (
-                    highlightedItem.current[1] === 'pointer' &&
-                    eventDetails.reason === 'keyboard'
-                  ) {
-                    // focus moved using keyboard after using pointer
-                    blurStaleMenuItem(highlightedItem.current[0]);
-                  }
-                  highlightedItem.current = [
-                    eventDetails.index,
-                    eventDetails.reason
-                  ];
+          {autocomplete ? (
+            <AutocompletePrimitive.Root
+              inline
+              open
+              value={inputValue}
+              onValueChange={(value: string) => onInputValueChange?.(value)}
+              autoHighlight={!!inputValue?.length}
+              mode='none'
+              loopFocus={false}
+              onItemHighlighted={(value, eventDetails) => {
+                if (
+                  highlightedItem.current[1] === 'pointer' &&
+                  eventDetails.reason === 'keyboard'
+                ) {
+                  // focus moved using keyboard after using pointer
+                  blurStaleMenuItem(highlightedItem.current[0]);
+                }
+                highlightedItem.current = [
+                  eventDetails.index,
+                  eventDetails.reason
+                ];
+              }}
+            >
+              <AutocompletePrimitive.Input
+                placeholder={searchPlaceholder}
+                className={styles.comboboxInput}
+                ref={inputRef}
+                onPointerEnter={e => {
+                  focusInput();
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'ArrowLeft') return;
+                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);
+                  if (e.key === 'ArrowRight' || e.key === 'Enter')
+                    checkAndOpenSubMenu();
+                  e.stopPropagation();
                 }}
+                tabIndex={-1}
+              />
+              <AutocompletePrimitive.List
+                className={styles.comboboxContent}
+                ref={containerRef}
               >
-                <AutocompletePrimitive.Input
-                  placeholder={searchPlaceholder}
-                  className={styles.comboboxInput}
-                  ref={inputRef}
-                  onPointerEnter={e => {
-                    focusInput();
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'ArrowLeft') return;
-                    if (e.key === 'Escape') return checkAndCloseSubMenu(e);
-                    if (e.key === 'ArrowRight' || e.key === 'Enter')
-                      checkAndOpenSubMenu();
-                    e.stopPropagation();
-                  }}
-                  tabIndex={-1}
-                />
-                <AutocompletePrimitive.List
-                  className={styles.comboboxContent}
-                  ref={containerRef}
-                >
-                  {children}
-                </AutocompletePrimitive.List>
-              </AutocompletePrimitive.Root>
-            ) : (
-              children
-            )}
-          </MenuPrimitive.Popup>
-        </MenuPrimitive.Positioner>
-      </MenuPrimitive.Portal>
-    );
-  }
-);
+                {children}
+              </AutocompletePrimitive.List>
+            </AutocompletePrimitive.Root>
+          ) : (
+            children
+          )}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
 MenuContent.displayName = 'Menu.Content';
 
-export const MenuSubContent = forwardRef<HTMLDivElement, MenuContentProps>(
-  ({ ...props }, ref) => <MenuContent ref={ref} sideOffset={2} {...props} />
-);
-MenuSubContent.displayName = 'Menu.SubContent';
+export function MenuSubContent(props: MenuContentProps) {
+  return <MenuContent sideOffset={2} {...props} />;
+}
+MenuSubContent.displayName = 'Menu.SubmenuContent';
diff --git a/packages/raystack/components/menu/menu-item.tsx b/packages/raystack/components/menu/menu-item.tsx
index 546b66f6c..27c9d011c 100644
--- a/packages/raystack/components/menu/menu-item.tsx
+++ b/packages/raystack/components/menu/menu-item.tsx
@@ -4,7 +4,6 @@ import {
   Autocomplete as AutocompletePrimitive,
   Menu as MenuPrimitive
 } from '@base-ui/react';
-import { forwardRef } from 'react';
 import { Cell, CellBaseProps } from './cell';
 import { useMenuContext } from './menu-root';
 import { getMatch } from './utils';
@@ -13,46 +12,49 @@ export interface MenuItemProps extends MenuPrimitive.Item.Props, CellBaseProps {
   value?: string;
 }
 
-export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {
-    const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+export function MenuItem({
+  children,
+  value,
+  leadingIcon,
+  trailingIcon,
+  render,
+  ...props
+}: MenuItemProps) {
+  const { autocomplete, inputValue, shouldFilter } = useMenuContext();
 
-    const cell = render ?? (
-      <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
-    );
-
-    // In auto mode, hide items that don't match the search value
-    if (shouldFilter && !getMatch(value, children, inputValue)) {
-      return null;
-    }
+  const cell = render ?? (
+    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+  );
 
-    if (autocomplete) {
-      return (
-        <AutocompletePrimitive.Item
-          ref={ref}
-          value={value}
-          render={<MenuPrimitive.Item render={cell} />}
-          {...props}
-        >
-          {children}
-        </AutocompletePrimitive.Item>
-      );
-    }
+  // In auto mode, hide items that don't match the search value
+  if (shouldFilter && !getMatch(value, children, inputValue)) {
+    return null;
+  }
 
+  if (autocomplete) {
     return (
-      <MenuPrimitive.Item
-        ref={ref}
-        render={cell}
+      <AutocompletePrimitive.Item
+        value={value}
+        render={<MenuPrimitive.Item render={cell} />}
         {...props}
-        onFocus={e => {
-          e.stopPropagation();
-          e.preventDefault();
-          e.preventBaseUIHandler();
-        }}
       >
         {children}
-      </MenuPrimitive.Item>
+      </AutocompletePrimitive.Item>
     );
   }
-);
+
+  return (
+    <MenuPrimitive.Item
+      render={cell}
+      {...props}
+      onFocus={e => {
+        e.stopPropagation();
+        e.preventDefault();
+        e.preventBaseUIHandler();
+      }}
+    >
+      {children}
+    </MenuPrimitive.Item>
+  );
+}
 MenuItem.displayName = 'Menu.Item';
diff --git a/packages/raystack/components/menu/menu-misc.tsx b/packages/raystack/components/menu/menu-misc.tsx
index 929f8b80c..1072642b5 100644
--- a/packages/raystack/components/menu/menu-misc.tsx
+++ b/packages/raystack/components/menu/menu-misc.tsx
@@ -2,31 +2,33 @@
 
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { cx } from 'class-variance-authority';
-import { Fragment, forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, Fragment, ReactNode } from 'react';
 import styles from './menu.module.css';
 import { useMenuContext } from './menu-root';
 
-export const MenuGroup = forwardRef<HTMLDivElement, MenuPrimitive.Group.Props>(
-  ({ className, children, ...props }, ref) => {
-    const { shouldFilter } = useMenuContext();
-
-    if (shouldFilter) {
-      return <Fragment>{children}</Fragment>;
-    }
+export function MenuGroup({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.Group.Props) {
+  const { shouldFilter } = useMenuContext();
 
-    return (
-      <MenuPrimitive.Group ref={ref} className={cx(className)} {...props}>
-        {children}
-      </MenuPrimitive.Group>
-    );
+  if (shouldFilter) {
+    return <Fragment>{children}</Fragment>;
   }
-);
+
+  return (
+    <MenuPrimitive.Group className={cx(className)} {...props}>
+      {children}
+    </MenuPrimitive.Group>
+  );
+}
 MenuGroup.displayName = 'Menu.Group';
 
-export const MenuLabel = forwardRef<
-  HTMLDivElement,
-  MenuPrimitive.GroupLabel.Props
->(({ className, ...props }, ref) => {
+export function MenuLabel({
+  className,
+  ...props
+}: MenuPrimitive.GroupLabel.Props) {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -35,18 +37,14 @@ export const MenuLabel = forwardRef<
 
   return (
     <MenuPrimitive.GroupLabel
-      ref={ref}
       className={cx(styles.label, className)}
       {...props}
     />
   );
-});
+}
 MenuLabel.displayName = 'Menu.Label';
 
-export const MenuSeparator = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+export function MenuSeparator({ className, ...props }: ComponentProps<'div'>) {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -55,23 +53,23 @@ export const MenuSeparator = forwardRef<
 
   return (
     <div
-      ref={ref}
       role='separator'
       className={cx(styles.separator, className)}
       {...props}
     />
   );
-});
+}
 MenuSeparator.displayName = 'Menu.Separator';
 
-export const MenuEmptyState = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode;
-  }
->(({ className, children, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.empty, className)} {...props}>
-    {children}
-  </div>
-));
+export function MenuEmptyState({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'> & { children: ReactNode }) {
+  return (
+    <div className={cx(styles.empty, className)} {...props}>
+      {children}
+    </div>
+  );
+}
 MenuEmptyState.displayName = 'Menu.EmptyState';
diff --git a/packages/raystack/components/menu/menu-root.tsx b/packages/raystack/components/menu/menu-root.tsx
index 878cce912..3af2ef47e 100644
--- a/packages/raystack/components/menu/menu-root.tsx
+++ b/packages/raystack/components/menu/menu-root.tsx
@@ -135,7 +135,7 @@ export const MenuRoot = ({
     );
 
   return (
-    <MenuContext.Provider
+    <MenuContext
       value={{
         autocomplete,
         inputRef,
@@ -154,7 +154,7 @@ export const MenuRoot = ({
         modal
         {...props}
       />
-    </MenuContext.Provider>
+    </MenuContext>
   );
 };
 MenuRoot.displayName = 'Menu';
@@ -224,7 +224,7 @@ export const MenuSubMenu = ({
     );
 
   return (
-    <MenuContext.Provider
+    <MenuContext
       value={{
         autocomplete,
         inputRef,
@@ -243,7 +243,7 @@ export const MenuSubMenu = ({
         onOpenChange={handleOpenChange}
         {...props}
       />
-    </MenuContext.Provider>
+    </MenuContext>
   );
 };
-MenuSubMenu.displayName = 'Menu.SubMenu';
+MenuSubMenu.displayName = 'Menu.Submenu';
diff --git a/packages/raystack/components/menu/menu-trigger.tsx b/packages/raystack/components/menu/menu-trigger.tsx
index 1c2f6b230..3c8d2f42f 100644
--- a/packages/raystack/components/menu/menu-trigger.tsx
+++ b/packages/raystack/components/menu/menu-trigger.tsx
@@ -2,7 +2,6 @@
 
 import { Autocomplete as AutocompletePrimitive } from '@base-ui/react';
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import { forwardRef } from 'react';
 import { TriangleRightIcon } from '~/icons';
 import { Button } from '../button';
 import { useMenubarContext } from '../menubar/menubar';
@@ -15,33 +14,36 @@ export interface MenuTriggerProps extends MenuPrimitive.Trigger.Props {
   stopPropagation?: boolean;
 }
 
-export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
-  ({ children, stopPropagation = true, onClick, render, ...props }, ref) => {
-    const inMenubarContext = useMenubarContext();
-    const menubarRender = inMenubarContext ? (
-      <Button
-        variant='text'
-        color='neutral'
-        size='small'
-        className={`${styles.menuBarTrigger} rs-menu-trigger`}
-      />
-    ) : undefined;
+export function MenuTrigger({
+  children,
+  stopPropagation = true,
+  onClick,
+  render,
+  ...props
+}: MenuTriggerProps) {
+  const inMenubarContext = useMenubarContext();
+  const menubarRender = inMenubarContext ? (
+    <Button
+      variant='text'
+      color='neutral'
+      size='small'
+      className={`${styles.menuBarTrigger} rs-menu-trigger`}
+    />
+  ) : undefined;
 
-    return (
-      <MenuPrimitive.Trigger
-        ref={ref}
-        render={render ?? menubarRender}
-        onClick={e => {
-          if (stopPropagation) e.stopPropagation();
-          onClick?.(e);
-        }}
-        {...props}
-      >
-        {children}
-      </MenuPrimitive.Trigger>
-    );
-  }
-);
+  return (
+    <MenuPrimitive.Trigger
+      render={render ?? menubarRender}
+      onClick={e => {
+        if (stopPropagation) e.stopPropagation();
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {children}
+    </MenuPrimitive.Trigger>
+  );
+}
 MenuTrigger.displayName = 'Menu.Trigger';
 
 export interface MenuSubTriggerProps
@@ -50,58 +52,49 @@ export interface MenuSubTriggerProps
   value?: string;
 }
 
-export const MenuSubTrigger = forwardRef<HTMLDivElement, MenuSubTriggerProps>(
-  (
-    {
-      children,
-      value,
-      trailingIcon = <TriangleRightIcon />,
-      leadingIcon,
-      ...props
-    },
-    ref
-  ) => {
-    const { parent, inputRef } = useMenuContext();
-
-    if (
-      parent?.shouldFilter &&
-      !getMatch(value, children, parent?.inputValue)
-    ) {
-      return null;
-    }
+export function MenuSubTrigger({
+  children,
+  value,
+  trailingIcon = <TriangleRightIcon />,
+  leadingIcon,
+  ...props
+}: MenuSubTriggerProps) {
+  const { parent, inputRef } = useMenuContext();
 
-    const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
-    return (
-      <MenuPrimitive.SubmenuTrigger
-        ref={ref}
-        render={
-          parent?.autocomplete ? (
-            <AutocompletePrimitive.Item
-              value={value}
-              render={cell}
-              onPointerEnter={e => {
-                if (document?.activeElement !== parent?.inputRef?.current)
-                  parent?.inputRef?.current?.focus();
-                props?.onPointerEnter?.(e);
-              }}
-              onKeyDown={e => {
-                requestAnimationFrame(() => {
-                  inputRef?.current?.focus();
-                });
-                props?.onKeyDown?.(e);
-              }}
-            />
-          ) : (
-            cell
-          )
-        }
-        {...props}
-        role={parent?.autocomplete ? 'option' : 'menuitem'}
-        data-slot='menu-subtrigger'
-      >
-        {children}
-      </MenuPrimitive.SubmenuTrigger>
-    );
+  if (parent?.shouldFilter && !getMatch(value, children, parent?.inputValue)) {
+    return null;
   }
-);
-MenuSubTrigger.displayName = 'Menu.SubTrigger';
+
+  const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      render={
+        parent?.autocomplete ? (
+          <AutocompletePrimitive.Item
+            value={value}
+            render={cell}
+            onPointerEnter={e => {
+              if (document?.activeElement !== parent?.inputRef?.current)
+                parent?.inputRef?.current?.focus();
+              props?.onPointerEnter?.(e);
+            }}
+            onKeyDown={e => {
+              requestAnimationFrame(() => {
+                inputRef?.current?.focus();
+              });
+              props?.onKeyDown?.(e);
+            }}
+          />
+        ) : (
+          cell
+        )
+      }
+      {...props}
+      role={parent?.autocomplete ? 'option' : 'menuitem'}
+      data-slot='menu-subtrigger'
+    >
+      {children}
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+MenuSubTrigger.displayName = 'Menu.SubmenuTrigger';
diff --git a/packages/raystack/components/menubar/menubar.tsx b/packages/raystack/components/menubar/menubar.tsx
index 0758ce46b..8088c6c00 100644
--- a/packages/raystack/components/menubar/menubar.tsx
+++ b/packages/raystack/components/menubar/menubar.tsx
@@ -2,7 +2,7 @@
 
 import { Menubar as MenubarPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { createContext, ElementRef, forwardRef, useContext } from 'react';
+import { createContext, useContext } from 'react';
 import styles from './menubar.module.css';
 
 const MenubarContext = createContext(false);
@@ -11,18 +11,13 @@ export function useMenubarContext() {
   return useContext(MenubarContext);
 }
 
-const MenubarRoot = forwardRef<
-  ElementRef<typeof MenubarPrimitive>,
-  MenubarPrimitive.Props
->(({ className, ...props }, ref) => (
-  <MenubarContext.Provider value={true}>
-    <MenubarPrimitive
-      ref={ref}
-      className={cx(styles.menubar, className)}
-      {...props}
-    />
-  </MenubarContext.Provider>
-));
+function MenubarRoot({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarContext value={true}>
+      <MenubarPrimitive className={cx(styles.menubar, className)} {...props} />
+    </MenubarContext>
+  );
+}
 MenubarRoot.displayName = 'Menubar';
 
 export const Menubar = MenubarRoot;
diff --git a/packages/raystack/components/meter/meter-misc.tsx b/packages/raystack/components/meter/meter-misc.tsx
index 5ccb5e85a..0590970a7 100644
--- a/packages/raystack/components/meter/meter-misc.tsx
+++ b/packages/raystack/components/meter/meter-misc.tsx
@@ -2,31 +2,26 @@
 
 import { Meter as MeterPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './meter.module.css';
 
-export const MeterLabel = forwardRef<
-  ElementRef<typeof MeterPrimitive.Label>,
-  MeterPrimitive.Label.Props
->(({ className, ...props }, ref) => (
-  <MeterPrimitive.Label
-    ref={ref}
-    className={cx(styles.label, className)}
-    {...props}
-  />
-));
+export function MeterLabel({
+  className,
+  ...props
+}: MeterPrimitive.Label.Props) {
+  return (
+    <MeterPrimitive.Label className={cx(styles.label, className)} {...props} />
+  );
+}
 
-MeterLabel.displayName = 'MeterLabel';
+MeterLabel.displayName = 'Meter.Label';
 
-export const MeterValue = forwardRef<
-  ElementRef<typeof MeterPrimitive.Value>,
-  MeterPrimitive.Value.Props
->(({ className, ...props }, ref) => (
-  <MeterPrimitive.Value
-    ref={ref}
-    className={cx(styles.value, className)}
-    {...props}
-  />
-));
+export function MeterValue({
+  className,
+  ...props
+}: MeterPrimitive.Value.Props) {
+  return (
+    <MeterPrimitive.Value className={cx(styles.value, className)} {...props} />
+  );
+}
 
-MeterValue.displayName = 'MeterValue';
+MeterValue.displayName = 'Meter.Value';
diff --git a/packages/raystack/components/meter/meter-root.tsx b/packages/raystack/components/meter/meter-root.tsx
index f791240ad..f00d838d4 100644
--- a/packages/raystack/components/meter/meter-root.tsx
+++ b/packages/raystack/components/meter/meter-root.tsx
@@ -2,7 +2,7 @@
 
 import { Meter as MeterPrimitive } from '@base-ui/react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { createContext, type ElementRef, forwardRef } from 'react';
+import { CSSProperties, createContext } from 'react';
 import styles from './meter.module.css';
 import { MeterTrack } from './meter-track';
 
@@ -34,48 +34,37 @@ export const MeterContext = createContext<MeterContextValue>({
   percentage: 0
 });
 
-export const MeterRoot = forwardRef<
-  ElementRef<typeof MeterPrimitive.Root>,
-  MeterProps
->(
-  (
-    {
-      className,
-      style = {},
-      variant = 'linear',
-      children = <MeterTrack />,
-      value = 0,
-      min = 0,
-      max = 100,
-      ...props
-    },
-    ref
-  ) => {
-    const percentage = ((value - min) * 100) / (max - min);
+export function MeterRoot({
+  className,
+  style = {},
+  variant = 'linear',
+  children = <MeterTrack />,
+  value = 0,
+  min = 0,
+  max = 100,
+  ...props
+}: MeterProps) {
+  const percentage = ((value - min) * 100) / (max - min);
 
-    return (
-      <MeterContext.Provider
-        value={{ variant: variant ?? 'linear', value, percentage }}
+  return (
+    <MeterContext value={{ variant: variant ?? 'linear', value, percentage }}>
+      <MeterPrimitive.Root
+        className={meter({ variant, className })}
+        style={
+          {
+            ...style,
+            '--rs-meter-percentage': percentage
+          } as CSSProperties
+        }
+        value={value}
+        min={min}
+        max={max}
+        {...props}
       >
-        <MeterPrimitive.Root
-          ref={ref}
-          className={meter({ variant, className })}
-          style={
-            {
-              ...style,
-              '--rs-meter-percentage': percentage
-            } as React.CSSProperties
-          }
-          value={value}
-          min={min}
-          max={max}
-          {...props}
-        >
-          {children}
-        </MeterPrimitive.Root>
-      </MeterContext.Provider>
-    );
-  }
-);
+        {children}
+      </MeterPrimitive.Root>
+    </MeterContext>
+  );
+}
 
-MeterRoot.displayName = 'MeterRoot';
+MeterRoot.displayName = 'Meter';
diff --git a/packages/raystack/components/meter/meter-track.tsx b/packages/raystack/components/meter/meter-track.tsx
index 791d2f258..cf8173386 100644
--- a/packages/raystack/components/meter/meter-track.tsx
+++ b/packages/raystack/components/meter/meter-track.tsx
@@ -2,20 +2,20 @@
 
 import { Meter as MeterPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef, useContext } from 'react';
+import { useContext } from 'react';
 import styles from './meter.module.css';
 import { MeterContext } from './meter-root';
 
-export const MeterTrack = forwardRef<
-  ElementRef<typeof MeterPrimitive.Track>,
-  MeterPrimitive.Track.Props
->(({ className, children, ...props }, ref) => {
+export function MeterTrack({
+  className,
+  children,
+  ...props
+}: MeterPrimitive.Track.Props) {
   const { variant } = useContext(MeterContext);
 
   if (variant === 'circular') {
     return (
       <MeterPrimitive.Track
-        ref={ref}
         className={cx(styles.circularSvg, className)}
         {...props}
         render={({ children: trackChildren, ...trackProps }) => (
@@ -34,15 +34,11 @@ export const MeterTrack = forwardRef<
   }
 
   return (
-    <MeterPrimitive.Track
-      ref={ref}
-      className={cx(styles.track, className)}
-      {...props}
-    >
+    <MeterPrimitive.Track className={cx(styles.track, className)} {...props}>
       <MeterPrimitive.Indicator className={styles.indicator} />
       {children}
     </MeterPrimitive.Track>
   );
-});
+}
 
-MeterTrack.displayName = 'MeterTrack';
+MeterTrack.displayName = 'Meter.Track';
diff --git a/packages/raystack/components/navbar/navbar-root.tsx b/packages/raystack/components/navbar/navbar-root.tsx
index 6700cd388..2eccba3f5 100644
--- a/packages/raystack/components/navbar/navbar-root.tsx
+++ b/packages/raystack/components/navbar/navbar-root.tsx
@@ -1,30 +1,32 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './navbar.module.css';
 
-export interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {
+export interface NavbarRootProps extends ComponentProps<'nav'> {
   sticky?: boolean;
 }
 
-export const NavbarRoot = forwardRef<ComponentRef<'nav'>, NavbarRootProps>(
-  ({ className, sticky = false, children, ...props }, ref) => {
-    return (
-      <nav
-        ref={ref}
-        className={cx(styles.root, className)}
-        data-sticky={sticky}
-        role='navigation'
-        {...props}
-      >
-        <Flex align='center' justify='between' className={styles.container}>
-          {children}
-        </Flex>
-      </nav>
-    );
-  }
-);
+export function NavbarRoot({
+  className,
+  sticky = false,
+  children,
+  ...props
+}: NavbarRootProps) {
+  return (
+    <nav
+      className={cx(styles.root, className)}
+      data-sticky={sticky}
+      role='navigation'
+      {...props}
+    >
+      <Flex align='center' justify='between' className={styles.container}>
+        {children}
+      </Flex>
+    </nav>
+  );
+}
 
 NavbarRoot.displayName = 'Navbar';
diff --git a/packages/raystack/components/navbar/navbar-sections.tsx b/packages/raystack/components/navbar/navbar-sections.tsx
index 68a2e7224..902cb4b48 100644
--- a/packages/raystack/components/navbar/navbar-sections.tsx
+++ b/packages/raystack/components/navbar/navbar-sections.tsx
@@ -1,17 +1,20 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './navbar.module.css';
 
-export interface NavbarStartProps
-  extends ComponentPropsWithoutRef<typeof Flex> {}
+export interface NavbarStartProps extends ComponentProps<typeof Flex> {}
 
-export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
-  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (
+export function NavbarStart({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: NavbarStartProps) {
+  return (
     <Flex
-      ref={ref}
       align='center'
       gap={5}
       className={cx(styles.start, className)}
@@ -21,17 +24,21 @@ export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
     >
       {children}
     </Flex>
-  )
-);
+  );
+}
 
 NavbarStart.displayName = 'Navbar.Start';
 
-export interface NavbarEndProps extends ComponentPropsWithoutRef<typeof Flex> {}
+export interface NavbarEndProps extends ComponentProps<typeof Flex> {}
 
-export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
-  ({ className, children, 'aria-label': ariaLabel, ...props }, ref) => (
+export function NavbarEnd({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: NavbarEndProps) {
+  return (
     <Flex
-      ref={ref}
       align='center'
       gap={5}
       className={cx(styles.end, className)}
@@ -41,7 +48,7 @@ export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
     >
       {children}
     </Flex>
-  )
-);
+  );
+}
 
 NavbarEnd.displayName = 'Navbar.End';

From 2d570c815c5f11e69f2a97def001b220b87bd964 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 03:38:02 +0530
Subject: [PATCH 06/11] chore: migrate components to React 19 (batch 5)
 <noreply@anthropic.com>

---
 .../raystack/components/popover/popover.tsx   |  70 ++++-----
 .../components/preview-card/preview-card.tsx  | 119 +++++++-------
 .../components/progress/progress-misc.tsx     |  47 +++---
 .../components/progress/progress-root.tsx     |  77 ++++------
 .../components/progress/progress-track.tsx    |  22 ++-
 packages/raystack/components/radio/radio.tsx  |  29 ++--
 .../scroll-area/scroll-area-scrollbar.tsx     |  14 +-
 .../components/scroll-area/scroll-area.tsx    |  36 ++---
 .../raystack/components/search/search.tsx     | 107 ++++++-------
 .../components/select/select-content.tsx      | 113 +++++++-------
 .../components/select/select-item.tsx         | 133 ++++++++--------
 .../components/select/select-misc.tsx         | 126 +++++++--------
 .../components/select/select-root.tsx         |   8 +-
 .../components/select/select-trigger.tsx      |  74 +++++----
 .../components/select/select-value.tsx        | 111 +++++++-------
 .../components/side-panel/side-panel.tsx      |   6 +
 .../components/sidebar/sidebar-item.tsx       | 144 ++++++++---------
 .../components/sidebar/sidebar-main.tsx       |  34 ++--
 .../components/sidebar/sidebar-misc.tsx       | 134 ++++++++--------
 .../components/sidebar/sidebar-root.tsx       | 145 ++++++++----------
 20 files changed, 754 insertions(+), 795 deletions(-)

diff --git a/packages/raystack/components/popover/popover.tsx b/packages/raystack/components/popover/popover.tsx
index 823aca06c..b9b15f9bd 100644
--- a/packages/raystack/components/popover/popover.tsx
+++ b/packages/raystack/components/popover/popover.tsx
@@ -2,7 +2,6 @@
 
 import { Popover as PopoverPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './popover.module.css';
 
 export interface PopoverContentProps
@@ -12,45 +11,38 @@ export interface PopoverContentProps
     >,
     PopoverPrimitive.Popup.Props {}
 
-const PopoverContent = forwardRef<
-  ElementRef<typeof PopoverPrimitive.Popup>,
-  PopoverContentProps
->(
-  (
-    {
-      initialFocus,
-      finalFocus,
-      className,
-      style,
-      render,
-      children,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    return (
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Positioner
-          sideOffset={4}
-          collisionPadding={3}
-          className={styles.popoverPositioner}
-          {...positionerProps}
+function PopoverContent({
+  ref,
+  initialFocus,
+  finalFocus,
+  className,
+  style,
+  render,
+  children,
+  ...positionerProps
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        sideOffset={4}
+        collisionPadding={3}
+        className={styles.popoverPositioner}
+        {...positionerProps}
+      >
+        <PopoverPrimitive.Popup
+          ref={ref}
+          className={cx(styles.popover, className)}
+          render={render}
+          initialFocus={initialFocus}
+          finalFocus={finalFocus}
+          style={style}
         >
-          <PopoverPrimitive.Popup
-            ref={ref}
-            className={cx(styles.popover, className)}
-            render={render}
-            initialFocus={initialFocus}
-            finalFocus={finalFocus}
-            style={style}
-          >
-            {children}
-          </PopoverPrimitive.Popup>
-        </PopoverPrimitive.Positioner>
-      </PopoverPrimitive.Portal>
-    );
-  }
-);
+          {children}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
 PopoverContent.displayName = 'Popover.Content';
 
 export const Popover = Object.assign(PopoverPrimitive.Root, {
diff --git a/packages/raystack/components/preview-card/preview-card.tsx b/packages/raystack/components/preview-card/preview-card.tsx
index bbd3c7958..53d8cde9c 100644
--- a/packages/raystack/components/preview-card/preview-card.tsx
+++ b/packages/raystack/components/preview-card/preview-card.tsx
@@ -2,7 +2,6 @@
 
 import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './preview-card.module.css';
 
 export interface PreviewCardContentProps
@@ -18,70 +17,66 @@ export interface PreviewCardContentProps
   showArrow?: boolean;
 }
 
-const PreviewCardContent = forwardRef<
-  ElementRef<typeof PreviewCardPrimitive.Popup>,
-  PreviewCardContentProps
->(
-  (
-    {
-      className,
-      children,
-      showArrow = false,
-      style,
-      render,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    return (
-      <PreviewCardPrimitive.Portal>
-        <PreviewCardPrimitive.Positioner
-          sideOffset={showArrow ? 10 : 4}
-          collisionPadding={3}
-          className={styles.positioner}
-          {...positionerProps}
+function PreviewCardContent({
+  ref,
+  className,
+  children,
+  showArrow = false,
+  style,
+  render,
+  ...positionerProps
+}: PreviewCardContentProps) {
+  return (
+    <PreviewCardPrimitive.Portal>
+      <PreviewCardPrimitive.Positioner
+        sideOffset={showArrow ? 10 : 4}
+        collisionPadding={3}
+        className={styles.positioner}
+        {...positionerProps}
+      >
+        <PreviewCardPrimitive.Popup
+          ref={ref}
+          className={cx(styles.popup, className)}
+          style={style}
+          render={render}
         >
-          <PreviewCardPrimitive.Popup
-            ref={ref}
-            className={cx(styles.popup, className)}
-            style={style}
-            render={render}
-          >
-            {children}
-            {showArrow && (
-              <PreviewCardPrimitive.Arrow className={styles.arrow}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='6'
-                  height='7'
-                  viewBox='0 0 6 7'
-                  fill='none'
-                >
-                  <path
-                    d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
-                    fill='currentColor'
-                  />
-                </svg>
-              </PreviewCardPrimitive.Arrow>
-            )}
-          </PreviewCardPrimitive.Popup>
-        </PreviewCardPrimitive.Positioner>
-      </PreviewCardPrimitive.Portal>
-    );
-  }
-);
+          {children}
+          {showArrow && (
+            <PreviewCardPrimitive.Arrow className={styles.arrow}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                width='6'
+                height='7'
+                viewBox='0 0 6 7'
+                fill='none'
+              >
+                <path
+                  d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
+                  fill='currentColor'
+                />
+              </svg>
+            </PreviewCardPrimitive.Arrow>
+          )}
+        </PreviewCardPrimitive.Popup>
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
 PreviewCardContent.displayName = 'PreviewCard.Content';
 
-const PreviewCardViewport = forwardRef<
-  ElementRef<typeof PreviewCardPrimitive.Viewport>,
-  PreviewCardPrimitive.Viewport.Props
->(({ className, ...props }, ref) => (
-  <PreviewCardPrimitive.Viewport
-    ref={ref}
-    className={cx(styles.viewport, className)}
-    {...props}
-  />
-));
+function PreviewCardViewport({
+  ref,
+  className,
+  ...props
+}: PreviewCardPrimitive.Viewport.Props) {
+  return (
+    <PreviewCardPrimitive.Viewport
+      ref={ref}
+      className={cx(styles.viewport, className)}
+      {...props}
+    />
+  );
+}
 PreviewCardViewport.displayName = 'PreviewCard.Viewport';
 
 export const PreviewCard = Object.assign(PreviewCardPrimitive.Root, {
diff --git a/packages/raystack/components/progress/progress-misc.tsx b/packages/raystack/components/progress/progress-misc.tsx
index f1dd42f77..9f64288cd 100644
--- a/packages/raystack/components/progress/progress-misc.tsx
+++ b/packages/raystack/components/progress/progress-misc.tsx
@@ -2,31 +2,32 @@
 
 import { Progress as ProgressPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './progress.module.css';
 
-export const ProgressLabel = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Label>,
-  ProgressPrimitive.Label.Props
->(({ className, ...props }, ref) => (
-  <ProgressPrimitive.Label
-    ref={ref}
-    className={cx(styles.label, className)}
-    {...props}
-  />
-));
+export function ProgressLabel({
+  className,
+  ...props
+}: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cx(styles.label, className)}
+      {...props}
+    />
+  );
+}
 
-ProgressLabel.displayName = 'ProgressLabel';
+ProgressLabel.displayName = 'Progress.Label';
 
-export const ProgressValue = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Value>,
-  ProgressPrimitive.Value.Props
->(({ className, ...props }, ref) => (
-  <ProgressPrimitive.Value
-    ref={ref}
-    className={cx(styles.value, className)}
-    {...props}
-  />
-));
+export function ProgressValue({
+  className,
+  ...props
+}: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cx(styles.value, className)}
+      {...props}
+    />
+  );
+}
 
-ProgressValue.displayName = 'ProgressValue';
+ProgressValue.displayName = 'Progress.Value';
diff --git a/packages/raystack/components/progress/progress-root.tsx b/packages/raystack/components/progress/progress-root.tsx
index f02adedd8..6cae64547 100644
--- a/packages/raystack/components/progress/progress-root.tsx
+++ b/packages/raystack/components/progress/progress-root.tsx
@@ -2,7 +2,7 @@
 
 import { Progress as ProgressPrimitive } from '@base-ui/react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { createContext, type ElementRef, forwardRef } from 'react';
+import { type CSSProperties, createContext } from 'react';
 import styles from './progress.module.css';
 import { ProgressTrack } from './progress-track';
 
@@ -34,48 +34,39 @@ export const ProgressContext = createContext<ProgressContextValue>({
   percentage: 0
 });
 
-export const ProgressRoot = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Root>,
-  ProgressProps
->(
-  (
-    {
-      className,
-      style = {},
-      variant = 'linear',
-      children = <ProgressTrack />,
-      value = 0,
-      min = 0,
-      max = 100,
-      ...props
-    },
-    ref
-  ) => {
-    const percentage = value === null ? 0 : ((value - min) * 100) / (max - min);
+export function ProgressRoot({
+  className,
+  style = {},
+  variant = 'linear',
+  children = <ProgressTrack />,
+  value = 0,
+  min = 0,
+  max = 100,
+  ...props
+}: ProgressProps) {
+  const percentage = value === null ? 0 : ((value - min) * 100) / (max - min);
 
-    return (
-      <ProgressContext.Provider
-        value={{ variant: variant ?? 'linear', value, percentage }}
+  return (
+    <ProgressContext
+      value={{ variant: variant ?? 'linear', value, percentage }}
+    >
+      <ProgressPrimitive.Root
+        className={progress({ variant, className })}
+        style={
+          {
+            ...style,
+            '--rs-progress-percentage': percentage
+          } as CSSProperties
+        }
+        value={value}
+        min={min}
+        max={max}
+        {...props}
       >
-        <ProgressPrimitive.Root
-          ref={ref}
-          className={progress({ variant, className })}
-          style={
-            {
-              ...style,
-              '--rs-progress-percentage': percentage
-            } as React.CSSProperties
-          }
-          value={value}
-          min={min}
-          max={max}
-          {...props}
-        >
-          {children}
-        </ProgressPrimitive.Root>
-      </ProgressContext.Provider>
-    );
-  }
-);
+        {children}
+      </ProgressPrimitive.Root>
+    </ProgressContext>
+  );
+}
 
-ProgressRoot.displayName = 'ProgressRoot';
+ProgressRoot.displayName = 'Progress';
diff --git a/packages/raystack/components/progress/progress-track.tsx b/packages/raystack/components/progress/progress-track.tsx
index 9c8e6ab80..2f1e63af1 100644
--- a/packages/raystack/components/progress/progress-track.tsx
+++ b/packages/raystack/components/progress/progress-track.tsx
@@ -2,20 +2,20 @@
 
 import { Progress as ProgressPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef, useContext } from 'react';
+import { useContext } from 'react';
 import styles from './progress.module.css';
 import { ProgressContext } from './progress-root';
 
-export const ProgressTrack = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Track>,
-  ProgressPrimitive.Track.Props
->(({ className, children, ...props }, ref) => {
+export function ProgressTrack({
+  className,
+  children,
+  ...props
+}: ProgressPrimitive.Track.Props) {
   const { variant } = useContext(ProgressContext);
 
   if (variant === 'circular') {
     return (
       <ProgressPrimitive.Track
-        ref={ref}
         className={cx(styles.circularSvg, className)}
         {...props}
         render={({ children: trackChildren, ...trackProps }) => (
@@ -34,15 +34,11 @@ export const ProgressTrack = forwardRef<
   }
 
   return (
-    <ProgressPrimitive.Track
-      ref={ref}
-      className={cx(styles.track, className)}
-      {...props}
-    >
+    <ProgressPrimitive.Track className={cx(styles.track, className)} {...props}>
       <ProgressPrimitive.Indicator className={styles.indicator} />
       {children}
     </ProgressPrimitive.Track>
   );
-});
+}
 
-ProgressTrack.displayName = 'ProgressTrack';
+ProgressTrack.displayName = 'Progress.Track';
diff --git a/packages/raystack/components/radio/radio.tsx b/packages/raystack/components/radio/radio.tsx
index ff1d0ac93..81e79b73e 100644
--- a/packages/raystack/components/radio/radio.tsx
+++ b/packages/raystack/components/radio/radio.tsx
@@ -1,33 +1,24 @@
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 
 import styles from './radio.module.css';
 
-const RadioGroup = forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(
-  ({ className, ...props }, ref) => (
-    <RadioGroupPrimitive
-      ref={ref}
-      className={cx(styles.radio, className)}
-      {...props}
-    />
-  )
-);
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive className={cx(styles.radio, className)} {...props} />
+  );
+}
 
 RadioGroup.displayName = 'Radio.Group';
 
-const RadioItem = forwardRef<HTMLButtonElement, RadioPrimitive.Root.Props>(
-  ({ className, ...props }, forwardedRef) => (
-    <RadioPrimitive.Root
-      {...props}
-      ref={forwardedRef}
-      className={cx(styles.radioitem, className)}
-    >
+function RadioItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root {...props} className={cx(styles.radioitem, className)}>
       <RadioPrimitive.Indicator className={styles.indicator} />
     </RadioPrimitive.Root>
-  )
-);
+  );
+}
 
 RadioItem.displayName = 'Radio';
 
diff --git a/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx b/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
index bcb3ca4ce..7d9d19479 100644
--- a/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
+++ b/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
@@ -2,7 +2,6 @@
 
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import type { ScrollAreaType } from './scroll-area';
 import styles from './scroll-area.module.css';
 
@@ -11,13 +10,14 @@ export interface ScrollAreaScrollbarProps
   type?: ScrollAreaType;
 }
 
-export const ScrollAreaScrollbar = forwardRef<
-  HTMLDivElement,
-  ScrollAreaScrollbarProps
->(({ className, orientation = 'vertical', type = 'hover', ...props }, ref) => {
+export function ScrollAreaScrollbar({
+  className,
+  orientation = 'vertical',
+  type = 'hover',
+  ...props
+}: ScrollAreaScrollbarProps) {
   return (
     <ScrollAreaPrimitive.Scrollbar
-      ref={ref}
       orientation={orientation}
       className={cx(styles.scrollbar, styles[`scrollbar-${type}`], className)}
       {...props}
@@ -25,6 +25,6 @@ export const ScrollAreaScrollbar = forwardRef<
       <ScrollAreaPrimitive.Thumb className={styles.thumb} />
     </ScrollAreaPrimitive.Scrollbar>
   );
-});
+}
 
 ScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';
diff --git a/packages/raystack/components/scroll-area/scroll-area.tsx b/packages/raystack/components/scroll-area/scroll-area.tsx
index a6e0c767f..2f1e53023 100644
--- a/packages/raystack/components/scroll-area/scroll-area.tsx
+++ b/packages/raystack/components/scroll-area/scroll-area.tsx
@@ -2,7 +2,6 @@
 
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './scroll-area.module.css';
 import { ScrollAreaScrollbar } from './scroll-area-scrollbar';
 
@@ -12,23 +11,22 @@ export interface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {
   type?: ScrollAreaType;
 }
 
-export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ className, type = 'hover', children, ...props }, ref) => {
-    return (
-      <ScrollAreaPrimitive.Root
-        ref={ref}
-        className={cx(styles.root, className)}
-        {...props}
-      >
-        <ScrollAreaPrimitive.Viewport className={styles.viewport}>
-          <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
-        </ScrollAreaPrimitive.Viewport>
-        <ScrollAreaScrollbar orientation='vertical' type={type} />
-        <ScrollAreaScrollbar orientation='horizontal' type={type} />
-        <ScrollAreaPrimitive.Corner className={styles.corner} />
-      </ScrollAreaPrimitive.Root>
-    );
-  }
-);
+export function ScrollArea({
+  className,
+  type = 'hover',
+  children,
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <ScrollAreaPrimitive.Root className={cx(styles.root, className)} {...props}>
+      <ScrollAreaPrimitive.Viewport className={styles.viewport}>
+        <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollAreaScrollbar orientation='vertical' type={type} />
+      <ScrollAreaScrollbar orientation='horizontal' type={type} />
+      <ScrollAreaPrimitive.Corner className={styles.corner} />
+    </ScrollAreaPrimitive.Root>
+  );
+}
 
 ScrollArea.displayName = 'ScrollArea';
diff --git a/packages/raystack/components/search/search.tsx b/packages/raystack/components/search/search.tsx
index 06ef6a669..8dcbc3ba5 100644
--- a/packages/raystack/components/search/search.tsx
+++ b/packages/raystack/components/search/search.tsx
@@ -5,7 +5,6 @@ import { IconButton } from '../icon-button';
 import { InputField } from '../input-field';
 import { InputFieldProps } from '../input-field/input-field';
 
-import { forwardRef } from 'react';
 import styles from './search.module.css';
 
 export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
@@ -14,62 +13,58 @@ export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
   variant?: 'default' | 'borderless';
 }
 
-export const Search = forwardRef<HTMLInputElement, SearchProps>(
-  (
-    {
-      className,
-      disabled,
-      placeholder = 'Search',
-      size,
-      showClearButton,
-      onClear,
-      value,
-      onChange,
-      width = '100%',
-      variant = 'default',
-      ...props
-    }: SearchProps,
-    ref
-  ) => {
-    const trailingIconWithClear =
-      showClearButton && value ? (
-        <div className={styles.clearButtonWrapper}>
-          <IconButton
-            size={size === 'small' ? 2 : 3}
-            onClick={e => {
-              e.stopPropagation();
-              if (!disabled && onClear) {
-                onClear();
-              }
-            }}
-            disabled={disabled}
-            aria-label='Clear search'
-            className={styles.clearButton}
-          >
-            <CrossCircledIcon />
-          </IconButton>
-        </div>
-      ) : undefined;
-
-    return (
-      <div className={styles.container} role='search' style={{ width }}>
-        <InputField
-          leadingIcon={<MagnifyingGlassIcon />}
-          trailingIcon={trailingIconWithClear}
-          placeholder={placeholder}
+export function Search({
+  ref,
+  className,
+  disabled,
+  placeholder = 'Search',
+  size,
+  showClearButton,
+  onClear,
+  value,
+  onChange,
+  width = '100%',
+  variant = 'default',
+  ...props
+}: SearchProps) {
+  const trailingIconWithClear =
+    showClearButton && value ? (
+      <div className={styles.clearButtonWrapper}>
+        <IconButton
+          size={size === 'small' ? 2 : 3}
+          onClick={e => {
+            e.stopPropagation();
+            if (!disabled && onClear) {
+              onClear();
+            }
+          }}
           disabled={disabled}
-          value={value}
-          onChange={onChange}
-          size={size}
-          className={className}
-          aria-label={placeholder}
-          variant={variant}
-          ref={ref}
-          {...props}
-        />
+          aria-label='Clear search'
+          className={styles.clearButton}
+        >
+          <CrossCircledIcon />
+        </IconButton>
       </div>
-    );
-  }
-);
+    ) : undefined;
+
+  return (
+    <div className={styles.container} role='search' style={{ width }}>
+      <InputField
+        leadingIcon={<MagnifyingGlassIcon />}
+        trailingIcon={trailingIconWithClear}
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        size={size}
+        className={className}
+        aria-label={placeholder}
+        variant={variant}
+        ref={ref}
+        {...props}
+      />
+    </div>
+  );
+}
 
 Search.displayName = 'Search';
diff --git a/packages/raystack/components/select/select-content.tsx b/packages/raystack/components/select/select-content.tsx
index 51645699b..dfb655e74 100644
--- a/packages/raystack/components/select/select-content.tsx
+++ b/packages/raystack/components/select/select-content.tsx
@@ -5,11 +5,12 @@ import {
   Select as SelectPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
 export interface SelectContentProps {
+  ref?: React.Ref<HTMLDivElement>;
   className?: string;
   children?: ReactNode;
   searchPlaceholder?: string;
@@ -17,66 +18,62 @@ export interface SelectContentProps {
   style?: React.CSSProperties;
 }
 
-export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  (
-    {
-      className,
-      children,
-      searchPlaceholder = 'Search...',
-      sideOffset = 4,
-      ...props
-    },
-    ref
-  ) => {
-    const { autocomplete, multiple } = useSelectContext();
-
-    if (autocomplete) {
-      return (
-        <ComboboxPrimitive.Portal>
-          <ComboboxPrimitive.Positioner
-            sideOffset={sideOffset}
-            className={styles.positioner}
-          >
-            <ComboboxPrimitive.Popup
-              ref={ref}
-              className={cx(styles.content, className)}
-              data-multiselectable={multiple ? true : undefined}
-              {...props}
-            >
-              <ComboboxPrimitive.Input
-                placeholder={searchPlaceholder}
-                className={styles.comboboxInput}
-              />
-              <ComboboxPrimitive.List
-                className={styles.comboboxContent}
-                aria-multiselectable={multiple ? true : undefined}
-              >
-                {children}
-              </ComboboxPrimitive.List>
-            </ComboboxPrimitive.Popup>
-          </ComboboxPrimitive.Positioner>
-        </ComboboxPrimitive.Portal>
-      );
-    }
+export function SelectContent({
+  ref,
+  className,
+  children,
+  searchPlaceholder = 'Search...',
+  sideOffset = 4,
+  ...props
+}: SelectContentProps) {
+  const { autocomplete, multiple } = useSelectContext();
 
+  if (autocomplete) {
     return (
-      <SelectPrimitive.Positioner
-        sideOffset={sideOffset}
-        className={styles.positioner}
-        alignItemWithTrigger={false}
-      >
-        <SelectPrimitive.Popup
-          ref={ref}
-          className={cx(styles.content, className)}
-          data-multiselectable={multiple ? true : undefined}
-          {...props}
+      <ComboboxPrimitive.Portal>
+        <ComboboxPrimitive.Positioner
+          sideOffset={sideOffset}
+          className={styles.positioner}
         >
-          <SelectPrimitive.List className={styles.viewport}>
-            {children}
-          </SelectPrimitive.List>
-        </SelectPrimitive.Popup>
-      </SelectPrimitive.Positioner>
+          <ComboboxPrimitive.Popup
+            ref={ref}
+            className={cx(styles.content, className)}
+            data-multiselectable={multiple ? true : undefined}
+            {...props}
+          >
+            <ComboboxPrimitive.Input
+              placeholder={searchPlaceholder}
+              className={styles.comboboxInput}
+            />
+            <ComboboxPrimitive.List
+              className={styles.comboboxContent}
+              aria-multiselectable={multiple ? true : undefined}
+            >
+              {children}
+            </ComboboxPrimitive.List>
+          </ComboboxPrimitive.Popup>
+        </ComboboxPrimitive.Positioner>
+      </ComboboxPrimitive.Portal>
     );
   }
-);
+
+  return (
+    <SelectPrimitive.Positioner
+      sideOffset={sideOffset}
+      className={styles.positioner}
+      alignItemWithTrigger={false}
+    >
+      <SelectPrimitive.Popup
+        ref={ref}
+        className={cx(styles.content, className)}
+        data-multiselectable={multiple ? true : undefined}
+        {...props}
+      >
+        <SelectPrimitive.List className={styles.viewport}>
+          {children}
+        </SelectPrimitive.List>
+      </SelectPrimitive.Popup>
+    </SelectPrimitive.Positioner>
+  );
+}
 SelectContent.displayName = 'Select.Content';
diff --git a/packages/raystack/components/select/select-item.tsx b/packages/raystack/components/select/select-item.tsx
index b0d12629a..b674d9aee 100644
--- a/packages/raystack/components/select/select-item.tsx
+++ b/packages/raystack/components/select/select-item.tsx
@@ -5,7 +5,7 @@ import {
   Select as SelectPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode, useLayoutEffect } from 'react';
+import { ReactNode, useLayoutEffect } from 'react';
 import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
@@ -13,6 +13,7 @@ import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
 export interface SelectItemProps {
+  ref?: React.Ref<HTMLDivElement>;
   className?: string;
   children?: ReactNode;
   value: string;
@@ -20,77 +21,73 @@ export interface SelectItemProps {
   disabled?: boolean;
 }
 
-export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
-  (
-    {
-      className,
-      children,
-      value: providedValue,
-      leadingIcon,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const value = String(providedValue);
-    const {
-      registerItem,
-      unregisterItem,
-      autocomplete,
-      searchValue,
-      value: selectValue,
-      shouldFilter,
-      hasItems,
-      multiple
-    } = useSelectContext();
+export function SelectItem({
+  ref,
+  className,
+  children,
+  value: providedValue,
+  leadingIcon,
+  disabled,
+  ...props
+}: SelectItemProps) {
+  const value = String(providedValue);
+  const {
+    registerItem,
+    unregisterItem,
+    autocomplete,
+    searchValue,
+    value: selectValue,
+    shouldFilter,
+    hasItems,
+    multiple
+  } = useSelectContext();
 
-    const isSelected = multiple
-      ? selectValue?.includes(value)
-      : value === selectValue;
-    const isMatched = getMatch(value, children, searchValue);
-    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
+  const isSelected = multiple
+    ? selectValue?.includes(value)
+    : value === selectValue;
+  const isMatched = getMatch(value, children, searchValue);
+  const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
 
-    const element =
-      typeof children === 'string' ? (
-        <>
-          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}
-          <Text>{children}</Text>
-        </>
-      ) : (
-        children
-      );
+  const element =
+    typeof children === 'string' ? (
+      <>
+        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}
+        <Text>{children}</Text>
+      </>
+    ) : (
+      children
+    );
 
-    useLayoutEffect(() => {
-      registerItem({ leadingIcon, children, value });
-      return () => {
-        unregisterItem(value);
-      };
-    }, [value, children, registerItem, unregisterItem, leadingIcon]);
+  useLayoutEffect(() => {
+    registerItem({ leadingIcon, children, value });
+    return () => {
+      unregisterItem(value);
+    };
+  }, [value, children, registerItem, unregisterItem, leadingIcon]);
 
-    if (shouldFilter && !hasItems && !isMatched && !isSelected) {
-      return null;
-    }
+  if (shouldFilter && !hasItems && !isMatched && !isSelected) {
+    return null;
+  }
 
-    const ItemPrimitive = autocomplete
-      ? ComboboxPrimitive.Item
-      : SelectPrimitive.Item;
+  const ItemPrimitive = autocomplete
+    ? ComboboxPrimitive.Item
+    : SelectPrimitive.Item;
 
-    return (
-      <ItemPrimitive
-        ref={ref}
-        value={value}
-        className={cx(styles.menuitem, className, isHidden && styles.hidden)}
-        data-hidden={isHidden || undefined}
-        disabled={disabled || isHidden}
-        {...props}
-        render={(renderProps, state) => (
-          <div {...renderProps}>
-            {multiple && <Checkbox checked={state.selected} />}
-            {element}
-          </div>
-        )}
-      />
-    );
-  }
-);
+  return (
+    <ItemPrimitive
+      ref={ref}
+      value={value}
+      className={cx(styles.menuitem, className, isHidden && styles.hidden)}
+      data-hidden={isHidden || undefined}
+      disabled={disabled || isHidden}
+      {...props}
+      render={(renderProps, state) => (
+        <div {...renderProps}>
+          {multiple && <Checkbox checked={state.selected} />}
+          {element}
+        </div>
+      )}
+    />
+  );
+}
 SelectItem.displayName = 'Select.Item';
diff --git a/packages/raystack/components/select/select-misc.tsx b/packages/raystack/components/select/select-misc.tsx
index 289f64d79..e3de32e11 100644
--- a/packages/raystack/components/select/select-misc.tsx
+++ b/packages/raystack/components/select/select-misc.tsx
@@ -5,85 +5,91 @@ import {
   Select as SelectPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Fragment, forwardRef, ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
 export interface SelectGroupProps {
+  ref?: React.Ref<HTMLDivElement>;
   className?: string;
   children?: ReactNode;
 }
 
-export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
-  ({ className, children, ...props }, ref) => {
-    const { shouldFilter, autocomplete } = useSelectContext();
-
-    if (shouldFilter) return <Fragment>{children}</Fragment>;
-
-    const GroupPrimitive = autocomplete
-      ? ComboboxPrimitive.Group
-      : SelectPrimitive.Group;
-
-    return (
-      <GroupPrimitive
-        ref={ref}
-        className={cx(styles.menugroup, className)}
-        {...props}
-      >
-        {children}
-      </GroupPrimitive>
-    );
-  }
-);
+export function SelectGroup({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectGroupProps) {
+  const { shouldFilter, autocomplete } = useSelectContext();
+
+  if (shouldFilter) return <Fragment>{children}</Fragment>;
+
+  const GroupPrimitive = autocomplete
+    ? ComboboxPrimitive.Group
+    : SelectPrimitive.Group;
+
+  return (
+    <GroupPrimitive
+      ref={ref}
+      className={cx(styles.menugroup, className)}
+      {...props}
+    >
+      {children}
+    </GroupPrimitive>
+  );
+}
 SelectGroup.displayName = 'Select.Group';
 
 export interface SelectLabelProps {
+  ref?: React.Ref<HTMLDivElement>;
   className?: string;
   children?: ReactNode;
 }
 
-export const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(
-  ({ className, ...props }, ref) => {
-    const { shouldFilter, autocomplete } = useSelectContext();
-
-    if (shouldFilter) return null;
-
-    const LabelPrimitive = autocomplete
-      ? ComboboxPrimitive.GroupLabel
-      : SelectPrimitive.GroupLabel;
-
-    return (
-      <LabelPrimitive
-        ref={ref}
-        className={cx(styles.label, className)}
-        {...props}
-      />
-    );
-  }
-);
+export function SelectLabel({ ref, className, ...props }: SelectLabelProps) {
+  const { shouldFilter, autocomplete } = useSelectContext();
+
+  if (shouldFilter) return null;
+
+  const LabelPrimitive = autocomplete
+    ? ComboboxPrimitive.GroupLabel
+    : SelectPrimitive.GroupLabel;
+
+  return (
+    <LabelPrimitive
+      ref={ref}
+      className={cx(styles.label, className)}
+      {...props}
+    />
+  );
+}
 SelectLabel.displayName = 'Select.Label';
 
 export interface SelectSeparatorProps {
+  ref?: React.Ref<HTMLDivElement>;
   className?: string;
 }
 
-export const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(
-  ({ className, ...props }, ref) => {
-    const { shouldFilter, autocomplete } = useSelectContext();
-
-    if (shouldFilter) return null;
-
-    const SeparatorPrimitive = autocomplete
-      ? ComboboxPrimitive.Separator
-      : SelectPrimitive.Separator;
-
-    return (
-      <SeparatorPrimitive
-        ref={ref}
-        className={cx(styles.separator, className)}
-        {...props}
-      />
-    );
-  }
-);
+export function SelectSeparator({
+  ref,
+  className,
+  ...props
+}: SelectSeparatorProps) {
+  const { shouldFilter, autocomplete } = useSelectContext();
+
+  if (shouldFilter) return null;
+
+  const SeparatorPrimitive = autocomplete
+    ? ComboboxPrimitive.Separator
+    : SelectPrimitive.Separator;
+
+  return (
+    <SeparatorPrimitive
+      ref={ref}
+      className={cx(styles.separator, className)}
+      {...props}
+    />
+  );
+}
 SelectSeparator.displayName = 'Select.Separator';
diff --git a/packages/raystack/components/select/select-root.tsx b/packages/raystack/components/select/select-root.tsx
index 120f64a9f..563d08866 100644
--- a/packages/raystack/components/select/select-root.tsx
+++ b/packages/raystack/components/select/select-root.tsx
@@ -203,7 +203,7 @@ export const SelectRoot = (props: SelectRootProps) => {
 
   if (autocomplete) {
     return (
-      <SelectContext.Provider value={contextValue}>
+      <SelectContext value={contextValue}>
         <ComboboxPrimitive.Root
           {...commonProps}
           onInputValueChange={handleSearchValueChange}
@@ -215,15 +215,15 @@ export const SelectRoot = (props: SelectRootProps) => {
         >
           {children}
         </ComboboxPrimitive.Root>
-      </SelectContext.Provider>
+      </SelectContext>
     );
   }
 
   return (
-    <SelectContext.Provider value={contextValue}>
+    <SelectContext value={contextValue}>
       <SelectPrimitive.Root {...commonProps} required={required} name={name}>
         {children}
       </SelectPrimitive.Root>
-    </SelectContext.Provider>
+    </SelectContext>
   );
 };
diff --git a/packages/raystack/components/select/select-trigger.tsx b/packages/raystack/components/select/select-trigger.tsx
index 2d74bb936..32b0faa5c 100644
--- a/packages/raystack/components/select/select-trigger.tsx
+++ b/packages/raystack/components/select/select-trigger.tsx
@@ -6,7 +6,7 @@ import {
 } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cva, VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef, SVGAttributes } from 'react';
+import { ComponentProps, SVGAttributes } from 'react';
 import { Flex } from '../flex';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
@@ -34,48 +34,44 @@ const trigger = cva(styles.trigger, {
 });
 
 export interface SelectTriggerProps
-  extends ComponentPropsWithoutRef<'button'>,
+  extends ComponentProps<'button'>,
     VariantProps<typeof trigger> {
   iconProps?: IconProps;
 }
 
-export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  (
-    {
-      size,
-      variant,
-      className,
-      children,
-      iconProps = {},
-      'aria-label': ariaLabel,
-      ...props
-    },
-    ref
-  ) => {
-    const { multiple, autocomplete } = useSelectContext();
+export function SelectTrigger({
+  ref,
+  size,
+  variant,
+  className,
+  children,
+  iconProps = {},
+  'aria-label': ariaLabel,
+  ...props
+}: SelectTriggerProps) {
+  const { multiple, autocomplete } = useSelectContext();
 
-    const TriggerPrimitive = autocomplete
-      ? ComboboxPrimitive.Trigger
-      : SelectPrimitive.Trigger;
+  const TriggerPrimitive = autocomplete
+    ? ComboboxPrimitive.Trigger
+    : SelectPrimitive.Trigger;
 
-    return (
-      <TriggerPrimitive
-        data-multiselectable={multiple ? true : undefined}
-        ref={ref}
-        className={trigger({ size, variant, className })}
-        aria-label={ariaLabel || 'Select option'}
-        {...props}
-      >
-        <Flex className={styles.triggerContent} align='center' gap={2}>
-          {children}
-        </Flex>
-        <ChevronDownIcon
-          className={styles.triggerIcon}
-          aria-hidden='true'
-          {...iconProps}
-        />
-      </TriggerPrimitive>
-    );
-  }
-);
+  return (
+    <TriggerPrimitive
+      data-multiselectable={multiple ? true : undefined}
+      ref={ref}
+      className={trigger({ size, variant, className })}
+      aria-label={ariaLabel || 'Select option'}
+      {...props}
+    >
+      <Flex className={styles.triggerContent} align='center' gap={2}>
+        {children}
+      </Flex>
+      <ChevronDownIcon
+        className={styles.triggerIcon}
+        aria-hidden='true'
+        {...iconProps}
+      />
+    </TriggerPrimitive>
+  );
+}
 SelectTrigger.displayName = 'Select.Trigger';
diff --git a/packages/raystack/components/select/select-value.tsx b/packages/raystack/components/select/select-value.tsx
index b796eac09..e4d14bb5e 100644
--- a/packages/raystack/components/select/select-value.tsx
+++ b/packages/raystack/components/select/select-value.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import styles from './select.module.css';
 import { SelectMultipleValue } from './select-multiple-value';
 import { useSelectContext } from './select-root';
@@ -10,72 +10,77 @@ import { ItemType } from './types';
 type ValueType = Omit<ItemType, 'children'>;
 
 type SelectValueProps = {
+  ref?: React.Ref<HTMLSpanElement>;
   placeholder?: string;
   children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;
   className?: string;
 };
 
-export const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
-  ({ children, placeholder, className, ...props }, ref) => {
-    const { value, items, multiple } = useSelectContext();
+export function SelectValue({
+  ref,
+  children,
+  placeholder,
+  className,
+  ...props
+}: SelectValueProps) {
+  const { value, items, multiple } = useSelectContext();
 
-    const hasValue = multiple
-      ? Array.isArray(value) && value.length > 0
-      : !!value;
+  const hasValue = multiple
+    ? Array.isArray(value) && value.length > 0
+    : !!value;
 
-    const item = useMemo(() => {
-      if (!value) return undefined;
-      if (multiple && Array.isArray(value)) {
-        const itemValues = value.map(v => items[v]);
-        if (itemValues.length === 1) return itemValues[0];
-        return itemValues;
-      }
-      return items[value as string];
-    }, [value, items, multiple]);
-
-    if (!hasValue) {
-      return (
-        <span
-          ref={ref}
-          data-placeholder=''
-          className={cx(styles.placeholder, className)}
-          {...props}
-        >
-          {placeholder}
-        </span>
-      );
-    }
-
-    if (typeof children === 'function') {
-      return (
-        <span ref={ref} className={className} {...props}>
-          {children(item)}
-        </span>
-      );
+  const item = useMemo(() => {
+    if (!value) return undefined;
+    if (multiple && Array.isArray(value)) {
+      const itemValues = value.map(v => items[v]);
+      if (itemValues.length === 1) return itemValues[0];
+      return itemValues;
     }
+    return items[value as string];
+  }, [value, items, multiple]);
 
-    if (children) {
-      return (
-        <span ref={ref} className={className} {...props}>
-          {children}
-        </span>
-      );
-    }
+  if (!hasValue) {
+    return (
+      <span
+        ref={ref}
+        data-placeholder=''
+        className={cx(styles.placeholder, className)}
+        {...props}
+      >
+        {placeholder}
+      </span>
+    );
+  }
 
-    if (Array.isArray(item)) {
-      return <SelectMultipleValue data={item} />;
-    }
+  if (typeof children === 'function') {
+    return (
+      <span ref={ref} className={className} {...props}>
+        {children(item)}
+      </span>
+    );
+  }
 
+  if (children) {
     return (
       <span ref={ref} className={className} {...props}>
-        <div className={cx(styles.valueContent)}>
-          {typeof item?.children === 'string' && item?.leadingIcon && (
-            <div className={styles.itemIcon}>{item.leadingIcon}</div>
-          )}
-          {item?.children ?? value}
-        </div>
+        {children}
       </span>
     );
   }
-);
+
+  if (Array.isArray(item)) {
+    return <SelectMultipleValue data={item} />;
+  }
+
+  return (
+    <span ref={ref} className={className} {...props}>
+      <div className={cx(styles.valueContent)}>
+        {typeof item?.children === 'string' && item?.leadingIcon && (
+          <div className={styles.itemIcon}>{item.leadingIcon}</div>
+        )}
+        {item?.children ?? value}
+      </div>
+    </span>
+  );
+}
 SelectValue.displayName = 'Select.Value';
diff --git a/packages/raystack/components/side-panel/side-panel.tsx b/packages/raystack/components/side-panel/side-panel.tsx
index 471169948..3929a2020 100644
--- a/packages/raystack/components/side-panel/side-panel.tsx
+++ b/packages/raystack/components/side-panel/side-panel.tsx
@@ -31,6 +31,8 @@ const SidePanelRoot = ({
   );
 };
 
+SidePanelRoot.displayName = 'SidePanel';
+
 interface SidePanelHeaderProps {
   title: string;
   icon?: ReactNode;
@@ -64,6 +66,8 @@ const SidePanelHeader = ({
   );
 };
 
+SidePanelHeader.displayName = 'SidePanel.Header';
+
 interface SidePanelSectionProps {
   children: ReactNode;
 }
@@ -72,6 +76,8 @@ const SidePanelSection = ({ children }: SidePanelSectionProps) => {
   return <div className={styles['side-panel-section']}>{children}</div>;
 };
 
+SidePanelSection.displayName = 'SidePanel.Section';
+
 export const SidePanel = Object.assign(SidePanelRoot, {
   Header: SidePanelHeader,
   Section: SidePanelSection
diff --git a/packages/raystack/components/sidebar/sidebar-item.tsx b/packages/raystack/components/sidebar/sidebar-item.tsx
index 0dac1fab0..65c571908 100644
--- a/packages/raystack/components/sidebar/sidebar-item.tsx
+++ b/packages/raystack/components/sidebar/sidebar-item.tsx
@@ -2,9 +2,8 @@
 
 import { cx } from 'class-variance-authority';
 import {
-  ComponentPropsWithoutRef,
+  ComponentProps,
   cloneElement,
-  forwardRef,
   ReactElement,
   ReactNode,
   useContext
@@ -15,7 +14,7 @@ import { Tooltip } from '../tooltip';
 import styles from './sidebar.module.css';
 import { SidebarContext } from './sidebar-root';
 
-export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
+export interface SidebarItemProps extends ComponentProps<'a'> {
   leadingIcon?: ReactNode;
   active?: boolean;
   disabled?: boolean;
@@ -27,84 +26,77 @@ export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
   };
 }
 
-export const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
-  (
+export function SidebarItem({
+  classNames,
+  leadingIcon,
+  children,
+  active,
+  disabled,
+  as = <a />,
+  ...props
+}: SidebarItemProps) {
+  const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);
+
+  const shouldShowFallback =
+    leadingIcon == undefined &&
+    isCollapsed &&
+    typeof children === 'string' &&
+    children.length > 0;
+
+  const iconProps = {
+    align: 'center',
+    gap: 3,
+    className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),
+    'aria-hidden': true
+  } as const;
+
+  const content = cloneElement(
+    as,
     {
-      classNames,
-      leadingIcon,
-      children,
-      active,
-      disabled,
-      as = <a />,
+      className: cx(styles['nav-item'], classNames?.root),
+      'data-active': active,
+      'data-disabled': disabled,
+      role: 'listitem',
+      'aria-current': active ? 'page' : undefined,
+      'aria-disabled': disabled,
+      ...(isCollapsed && typeof children === 'string'
+        ? { 'aria-label': children }
+        : {}),
       ...props
     },
-    ref
-  ) => {
-    const { isCollapsed, hideCollapsedItemTooltip } =
-      useContext(SidebarContext);
-
-    const shouldShowFallback =
-      leadingIcon == undefined &&
-      isCollapsed &&
-      typeof children === 'string' &&
-      children.length > 0;
-
-    const iconProps = {
-      align: 'center',
-      gap: 3,
-      className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),
-      'aria-hidden': true
-    } as const;
+    <>
+      {shouldShowFallback ? (
+        <Flex {...iconProps}>
+          <Avatar
+            size={1}
+            variant='soft'
+            color='neutral'
+            fallback={children[0].toUpperCase()}
+            className={styles['nav-fallback-avatar']}
+          />
+        </Flex>
+      ) : null}
+      {!shouldShowFallback && leadingIcon ? (
+        <Flex {...iconProps}>{leadingIcon}</Flex>
+      ) : null}
+      {!isCollapsed && (
+        <span className={cx(styles['nav-text'], classNames?.text)}>
+          {children}
+        </span>
+      )}
+    </>
+  );
 
-    const content = cloneElement(
-      as,
-      {
-        ref,
-        className: cx(styles['nav-item'], classNames?.root),
-        'data-active': active,
-        'data-disabled': disabled,
-        role: 'listitem',
-        'aria-current': active ? 'page' : undefined,
-        'aria-disabled': disabled,
-        ...(isCollapsed && typeof children === 'string'
-          ? { 'aria-label': children }
-          : {}),
-        ...props
-      },
-      <>
-        {shouldShowFallback ? (
-          <Flex {...iconProps}>
-            <Avatar
-              size={1}
-              variant='soft'
-              color='neutral'
-              fallback={children[0].toUpperCase()}
-              className={styles['nav-fallback-avatar']}
-            />
-          </Flex>
-        ) : null}
-        {!shouldShowFallback && leadingIcon ? (
-          <Flex {...iconProps}>{leadingIcon}</Flex>
-        ) : null}
-        {!isCollapsed && (
-          <span className={cx(styles['nav-text'], classNames?.text)}>
-            {children}
-          </span>
-        )}
-      </>
+  if (isCollapsed && !hideCollapsedItemTooltip) {
+    return (
+      <Tooltip>
+        <Tooltip.Trigger render={content} />
+        <Tooltip.Content side='right'>{children}</Tooltip.Content>
+      </Tooltip>
     );
-
-    if (isCollapsed && !hideCollapsedItemTooltip) {
-      return (
-        <Tooltip>
-          <Tooltip.Trigger render={content} />
-          <Tooltip.Content side='right'>{children}</Tooltip.Content>
-        </Tooltip>
-      );
-    }
-
-    return content;
   }
-);
+
+  return content;
+}
 
 SidebarItem.displayName = 'Sidebar.Item';
diff --git a/packages/raystack/components/sidebar/sidebar-main.tsx b/packages/raystack/components/sidebar/sidebar-main.tsx
index c1a1d8767..f1627c797 100644
--- a/packages/raystack/components/sidebar/sidebar-main.tsx
+++ b/packages/raystack/components/sidebar/sidebar-main.tsx
@@ -1,24 +1,26 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './sidebar.module.css';
 
-export const SidebarMain = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <Flex
-    ref={ref}
-    className={cx(styles.main, className)}
-    direction='column'
-    role='group'
-    aria-label='Main navigation'
-    {...props}
-  >
-    {children}
-  </Flex>
-));
+export function SidebarMain({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <Flex
+      className={cx(styles.main, className)}
+      direction='column'
+      role='group'
+      aria-label='Main navigation'
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
 
 SidebarMain.displayName = 'Sidebar.Main';
diff --git a/packages/raystack/components/sidebar/sidebar-misc.tsx b/packages/raystack/components/sidebar/sidebar-misc.tsx
index 981860802..6f54bee23 100644
--- a/packages/raystack/components/sidebar/sidebar-misc.tsx
+++ b/packages/raystack/components/sidebar/sidebar-misc.tsx
@@ -1,45 +1,48 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Flex } from '../flex';
 import styles from './sidebar.module.css';
 
-export const SidebarHeader = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <Flex
-    align='center'
-    ref={ref}
-    className={cx(styles.header, className)}
-    role='banner'
-    {...props}
-  >
-    {children}
-  </Flex>
-));
+export function SidebarHeader({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <Flex
+      align='center'
+      className={cx(styles.header, className)}
+      role='banner'
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
 SidebarHeader.displayName = 'Sidebar.Header';
 
-export const SidebarFooter = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <Flex
-    ref={ref}
-    className={cx(styles.footer, className)}
-    direction='column'
-    role='list'
-    aria-label='Footer navigation'
-    {...props}
-  >
-    {children}
-  </Flex>
-));
+export function SidebarFooter({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <Flex
+      className={cx(styles.footer, className)}
+      direction='column'
+      role='list'
+      aria-label='Footer navigation'
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
 SidebarFooter.displayName = 'Sidebar.Footer';
 
-export interface SidebarNavigationGroupProps
-  extends ComponentPropsWithoutRef<'div'> {
+export interface SidebarNavigationGroupProps extends ComponentProps<'div'> {
   label: string;
   leadingIcon?: ReactNode;
   classNames?: {
@@ -50,38 +53,43 @@ export interface SidebarNavigationGroupProps
   };
 }
 
-export const SidebarNavigationGroup = forwardRef<
-  HTMLElement,
-  SidebarNavigationGroupProps
->(({ className, label, leadingIcon, classNames, children, ...props }, ref) => (
-  <section
-    ref={ref}
-    className={cx(styles['nav-group'], className)}
-    aria-label={label}
-    {...props}
-  >
-    <Flex
-      align='center'
-      gap={3}
-      className={cx(styles['nav-group-header'], classNames?.header)}
+export function SidebarNavigationGroup({
+  className,
+  label,
+  leadingIcon,
+  classNames,
+  children,
+  ...props
+}: SidebarNavigationGroupProps) {
+  return (
+    <section
+      className={cx(styles['nav-group'], className)}
+      aria-label={label}
+      {...props}
     >
-      {leadingIcon && (
-        <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>
-          {leadingIcon}
+      <Flex
+        align='center'
+        gap={3}
+        className={cx(styles['nav-group-header'], classNames?.header)}
+      >
+        {leadingIcon && (
+          <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>
+            {leadingIcon}
+          </span>
+        )}
+        <span className={cx(styles['nav-group-label'], classNames?.label)}>
+          {label}
         </span>
-      )}
-      <span className={cx(styles['nav-group-label'], classNames?.label)}>
-        {label}
-      </span>
-    </Flex>
-    <Flex
-      direction='column'
-      className={cx(styles['nav-group-items'], classNames?.items)}
-      role='list'
-    >
-      {children}
-    </Flex>
-  </section>
-));
+      </Flex>
+      <Flex
+        direction='column'
+        className={cx(styles['nav-group-items'], classNames?.items)}
+        role='list'
+      >
+        {children}
+      </Flex>
+    </section>
+  );
+}
 
 SidebarNavigationGroup.displayName = 'Sidebar.Group';
diff --git a/packages/raystack/components/sidebar/sidebar-root.tsx b/packages/raystack/components/sidebar/sidebar-root.tsx
index b30915ebf..1438656a0 100644
--- a/packages/raystack/components/sidebar/sidebar-root.tsx
+++ b/packages/raystack/components/sidebar/sidebar-root.tsx
@@ -2,9 +2,8 @@
 
 import { cx } from 'class-variance-authority';
 import {
-  ComponentPropsWithoutRef,
+  ComponentProps,
   createContext,
-  forwardRef,
   ReactNode,
   useCallback,
   useState
@@ -21,7 +20,7 @@ export const SidebarContext = createContext<SidebarContextValue>({
   isCollapsed: false
 });
 
-export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
+export interface SidebarRootProps extends ComponentProps<'aside'> {
   position?: 'left' | 'right';
   hideCollapsedItemTooltip?: boolean;
   collapsible?: boolean;
@@ -31,82 +30,74 @@ export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
   onOpenChange?: (open: boolean) => void;
 }
 
-export const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(
-  (
-    {
-      className,
-      position = 'left',
-      open: providedOpen,
-      onOpenChange,
-      hideCollapsedItemTooltip,
-      collapsible = true,
-      tooltipMessage,
-      defaultOpen = true,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const open = providedOpen ?? internalOpen;
+export function SidebarRoot({
+  className,
+  position = 'left',
+  open: providedOpen,
+  onOpenChange,
+  hideCollapsedItemTooltip,
+  collapsible = true,
+  tooltipMessage,
+  defaultOpen = true,
+  children,
+  ...props
+}: SidebarRootProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = providedOpen ?? internalOpen;
 
-    const handleOpenChange = useCallback(
-      (value: boolean) => {
-        setInternalOpen(value);
-        onOpenChange?.(value);
-      },
-      [onOpenChange]
-    );
+  const handleOpenChange = useCallback(
+    (value: boolean) => {
+      setInternalOpen(value);
+      onOpenChange?.(value);
+    },
+    [onOpenChange]
+  );
 
-    return (
-      <SidebarContext.Provider
-        value={{ isCollapsed: !open, hideCollapsedItemTooltip }}
+  return (
+    <SidebarContext value={{ isCollapsed: !open, hideCollapsedItemTooltip }}>
+      <aside
+        className={cx(styles.root, className)}
+        data-position={position}
+        data-open={open ? '' : undefined}
+        data-closed={!open ? '' : undefined}
+        data-collapse-disabled={!collapsible ? '' : undefined}
+        aria-label='Navigation Sidebar'
+        aria-expanded={open}
+        role='navigation'
+        {...props}
       >
-        <aside
-          ref={ref}
-          className={cx(styles.root, className)}
-          data-position={position}
-          data-open={open ? '' : undefined}
-          data-closed={!open ? '' : undefined}
-          data-collapse-disabled={!collapsible ? '' : undefined}
-          aria-label='Navigation Sidebar'
-          aria-expanded={open}
-          role='navigation'
-          {...props}
-        >
-          {collapsible && (
-            <Tooltip trackCursorAxis='y'>
-              <Tooltip.Trigger
-                render={
-                  <div
-                    className={styles.resizeHandle}
-                    onClick={() => handleOpenChange(!open)}
-                    role='button'
-                    tabIndex={0}
-                    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}
-                    onKeyDown={e => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        handleOpenChange(!open);
-                      }
-                    }}
-                  />
-                }
-              />
-              <Tooltip.Content
-                side={position === 'left' ? 'right' : 'left'}
-                sideOffset={10}
-              >
-                {tooltipMessage ??
-                  (open ? 'Click to collapse' : 'Click to expand')}
-              </Tooltip.Content>
-            </Tooltip>
-          )}
-          {children}
-        </aside>
-      </SidebarContext.Provider>
-    );
-  }
-);
+        {collapsible && (
+          <Tooltip trackCursorAxis='y'>
+            <Tooltip.Trigger
+              render={
+                <div
+                  className={styles.resizeHandle}
+                  onClick={() => handleOpenChange(!open)}
+                  role='button'
+                  tabIndex={0}
+                  aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handleOpenChange(!open);
+                    }
+                  }}
+                />
+              }
+            />
+            <Tooltip.Content
+              side={position === 'left' ? 'right' : 'left'}
+              sideOffset={10}
+            >
+              {tooltipMessage ??
+                (open ? 'Click to collapse' : 'Click to expand')}
+            </Tooltip.Content>
+          </Tooltip>
+        )}
+        {children}
+      </aside>
+    </SidebarContext>
+  );
+}
 
 SidebarRoot.displayName = 'Sidebar';

From a79e13bc75a61ac95d7a337c97dbb4f712a0d6b0 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 03:44:41 +0530
Subject: [PATCH 07/11] chore: migrate components to React 19 (batch 6)
 <noreply@anthropic.com>

---
 .../raystack/components/skeleton/skeleton.tsx |  14 +-
 .../raystack/components/slider/slider.tsx     | 131 +++++++++---------
 .../raystack/components/spinner/spinner.tsx   |  49 ++++---
 .../raystack/components/switch/switch.tsx     |  10 +-
 packages/raystack/components/table/table.tsx  | 106 +++++++-------
 packages/raystack/components/tabs/tabs.tsx    |  63 +++------
 .../components/text-area/text-area.tsx        | 130 ++++++++---------
 packages/raystack/components/text/text.tsx    |  92 ++++++------
 .../components/theme-provider/theme.tsx       |  16 ++-
 .../components/toast/toast-provider.tsx       |  13 +-
 .../raystack/components/toast/toast-root.tsx  |  14 +-
 11 files changed, 300 insertions(+), 338 deletions(-)

diff --git a/packages/raystack/components/skeleton/skeleton.tsx b/packages/raystack/components/skeleton/skeleton.tsx
index 0ff66bde4..06c4b8c27 100644
--- a/packages/raystack/components/skeleton/skeleton.tsx
+++ b/packages/raystack/components/skeleton/skeleton.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { CSSProperties, createContext, useContext } from 'react';
+import { CSSProperties, createContext, ReactNode, useContext } from 'react';
 import styles from './skeleton.module.css';
 
 export interface SkeletonProps {
@@ -23,7 +23,7 @@ export interface SkeletonProps {
 const SkeletonContext = createContext<SkeletonProps | null>(null);
 
 interface SkeletonProviderProps extends SkeletonProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const SkeletonBase = (props: SkeletonProps) => {
@@ -86,12 +86,12 @@ const SkeletonBase = (props: SkeletonProps) => {
   );
 };
 
+SkeletonBase.displayName = 'Skeleton';
+
 const Provider = ({ children, ...props }: SkeletonProviderProps) => {
-  return (
-    <SkeletonContext.Provider value={props}>
-      {children}
-    </SkeletonContext.Provider>
-  );
+  return <SkeletonContext value={props}>{children}</SkeletonContext>;
 };
 
+Provider.displayName = 'Skeleton.Provider';
+
 export const Skeleton = Object.assign(SkeletonBase, { Provider });
diff --git a/packages/raystack/components/slider/slider.tsx b/packages/raystack/components/slider/slider.tsx
index c277e07b5..18c87b9e8 100644
--- a/packages/raystack/components/slider/slider.tsx
+++ b/packages/raystack/components/slider/slider.tsx
@@ -2,7 +2,7 @@
 
 import { Slider as SliderPrimitive } from '@base-ui/react';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { type ElementRef, forwardRef, useCallback } from 'react';
+import { useCallback } from 'react';
 import { Text } from '../text';
 import styles from './slider.module.css';
 
@@ -25,76 +25,73 @@ export interface SliderProps
   thumbSize?: 'small' | 'large';
 }
 
-const SliderRoot = forwardRef<
-  ElementRef<typeof SliderPrimitive.Root>,
-  SliderProps
->(
-  (
-    { className, variant = 'single', label, thumbSize = 'large', ...props },
-    ref
-  ) => {
-    const isRange = variant === 'range';
-    const isThumbSmall = thumbSize === 'small';
+function SliderRoot({
+  className,
+  variant = 'single',
+  label,
+  thumbSize = 'large',
+  ...props
+}: SliderProps) {
+  const isRange = variant === 'range';
+  const isThumbSmall = thumbSize === 'small';
 
-    const getLabel = useCallback(
-      (index: number) => {
-        if (!label) return undefined;
-        if (typeof label === 'string') return label;
-        return label[index];
-      },
-      [label]
-    );
+  const getLabel = useCallback(
+    (index: number) => {
+      if (!label) return undefined;
+      if (typeof label === 'string') return label;
+      return label[index];
+    },
+    [label]
+  );
 
-    const thumbCount = isRange ? 2 : 1;
+  const thumbCount = isRange ? 2 : 1;
 
-    return (
-      <SliderPrimitive.Root
-        ref={ref}
-        className={slider({ variant, className })}
-        thumbAlignment='edge'
-        {...props}
-      >
-        <SliderPrimitive.Control className={styles.control}>
-          <SliderPrimitive.Track className={styles.track}>
-            <SliderPrimitive.Indicator className={styles.indicator} />
-            {Array.from({ length: thumbCount }).map((_, i) => (
-              <SliderPrimitive.Thumb
-                key={i}
-                index={isRange ? i : undefined}
-                className={cx(styles.thumb)}
-                aria-label={
-                  getLabel(i) || (isRange ? `Thumb ${i + 1}` : 'Slider thumb')
-                }
-                data-size={thumbSize}
-              >
-                {isThumbSmall ? (
-                  <div className={styles.thumbSmall} />
-                ) : (
-                  <div className={styles.thumbLarge}>
-                    <div className={styles.thumbLargeLine} />
-                    <div className={styles.thumbLargeLine} />
-                    <div className={styles.thumbLargeLine} />
-                  </div>
-                )}
-                {getLabel(i) && (
-                  <Text
-                    className={styles.label}
-                    size={isThumbSmall ? 'micro' : 'mini'}
-                    weight='medium'
-                  >
-                    {getLabel(i)}
-                  </Text>
-                )}
-              </SliderPrimitive.Thumb>
-            ))}
-          </SliderPrimitive.Track>
-        </SliderPrimitive.Control>
-      </SliderPrimitive.Root>
-    );
-  }
-);
+  return (
+    <SliderPrimitive.Root
+      className={slider({ variant, className })}
+      thumbAlignment='edge'
+      {...props}
+    >
+      <SliderPrimitive.Control className={styles.control}>
+        <SliderPrimitive.Track className={styles.track}>
+          <SliderPrimitive.Indicator className={styles.indicator} />
+          {Array.from({ length: thumbCount }).map((_, i) => (
+            <SliderPrimitive.Thumb
+              key={i}
+              index={isRange ? i : undefined}
+              className={cx(styles.thumb)}
+              aria-label={
+                getLabel(i) || (isRange ? `Thumb ${i + 1}` : 'Slider thumb')
+              }
+              data-size={thumbSize}
+            >
+              {isThumbSmall ? (
+                <div className={styles.thumbSmall} />
+              ) : (
+                <div className={styles.thumbLarge}>
+                  <div className={styles.thumbLargeLine} />
+                  <div className={styles.thumbLargeLine} />
+                  <div className={styles.thumbLargeLine} />
+                </div>
+              )}
+              {getLabel(i) && (
+                <Text
+                  className={styles.label}
+                  size={isThumbSmall ? 'micro' : 'mini'}
+                  weight='medium'
+                >
+                  {getLabel(i)}
+                </Text>
+              )}
+            </SliderPrimitive.Thumb>
+          ))}
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
 
-SliderRoot.displayName = 'SliderRoot';
+SliderRoot.displayName = 'Slider';
 
 export const Slider = Object.assign(SliderRoot, {
   Value: SliderPrimitive.Value
diff --git a/packages/raystack/components/spinner/spinner.tsx b/packages/raystack/components/spinner/spinner.tsx
index e9772c2ba..636fc51ef 100644
--- a/packages/raystack/components/spinner/spinner.tsx
+++ b/packages/raystack/components/spinner/spinner.tsx
@@ -1,54 +1,53 @@
-import { cva, VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 
 import styles from './spinner.module.css';
 
 const spinner = cva(styles.spinner, {
   variants: {
     size: {
-      1: styles["spinner-size-1"],
-      2: styles["spinner-size-2"],
-      3: styles["spinner-size-3"],
-      4: styles["spinner-size-4"],
-      5: styles["spinner-size-5"],
-      6: styles["spinner-size-6"],
+      1: styles['spinner-size-1'],
+      2: styles['spinner-size-2'],
+      3: styles['spinner-size-3'],
+      4: styles['spinner-size-4'],
+      5: styles['spinner-size-5'],
+      6: styles['spinner-size-6']
     },
     color: {
-      default: styles["spinner-color-default"],
-      neutral: styles["spinner-color-neutral"],
-      accent: styles["spinner-color-accent"],
-      danger: styles["spinner-color-danger"],
-      success: styles["spinner-color-success"],
-      attention: styles["spinner-color-attention"],
+      default: styles['spinner-color-default'],
+      neutral: styles['spinner-color-neutral'],
+      accent: styles['spinner-color-accent'],
+      danger: styles['spinner-color-danger'],
+      success: styles['spinner-color-success'],
+      attention: styles['spinner-color-attention']
     }
   },
   defaultVariants: {
     size: 1,
-    color: "neutral",
-  },
+    color: 'neutral'
+  }
 });
 
 export interface SpinnerProps
-  extends ComponentPropsWithoutRef<"div">,
+  extends ComponentProps<'div'>,
     VariantProps<typeof spinner> {
   size?: 1 | 2 | 3 | 4 | 5 | 6;
-  color?: "default" | "neutral" | "accent" | "danger" | "success" | "attention";
+  color?: 'default' | 'neutral' | 'accent' | 'danger' | 'success' | 'attention';
 }
 
-export const Spinner = forwardRef<ElementRef<"div">, SpinnerProps>(
-  ({ className, size, color, ...props }, ref) => (
+export function Spinner({ className, size, color, ...props }: SpinnerProps) {
+  return (
     <div
-      ref={ref}
       className={spinner({ size, color, className })}
-      role="status"
-      aria-hidden="true"
+      role='status'
+      aria-hidden='true'
       {...props}
     >
       {[...Array(8)].map((_, index) => (
         <div key={index} className={styles.pole} />
       ))}
     </div>
-  )
-);
+  );
+}
 
 Spinner.displayName = 'Spinner';
diff --git a/packages/raystack/components/switch/switch.tsx b/packages/raystack/components/switch/switch.tsx
index dcdc9ad52..214ec533b 100644
--- a/packages/raystack/components/switch/switch.tsx
+++ b/packages/raystack/components/switch/switch.tsx
@@ -1,6 +1,5 @@
 import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { forwardRef } from 'react';
 
 import styles from './switch.module.css';
 
@@ -20,16 +19,15 @@ export interface SwitchProps
   extends SwitchPrimitive.Root.Props,
     VariantProps<typeof switchVariants> {}
 
-export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
-  ({ className, size, ...props }, forwardedRef) => (
+export function Switch({ className, size, ...props }: SwitchProps) {
+  return (
     <SwitchPrimitive.Root
       {...props}
-      ref={forwardedRef}
       className={switchVariants({ size, className })}
     >
       <SwitchPrimitive.Thumb className={styles.thumb} />
     </SwitchPrimitive.Root>
-  )
-);
+  );
+}
 
 Switch.displayName = 'Switch';
diff --git a/packages/raystack/components/table/table.tsx b/packages/raystack/components/table/table.tsx
index 648d4fe08..a4c1644e2 100644
--- a/packages/raystack/components/table/table.tsx
+++ b/packages/raystack/components/table/table.tsx
@@ -1,74 +1,78 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 import styles from './table.module.css';
 
 const table = cva(styles['table']);
-const TableRoot = React.forwardRef<
-  HTMLTableElement,
-  React.TableHTMLAttributes<HTMLTableElement> &
-    React.PropsWithChildren<VariantProps<typeof table>>
->(({ className, ...props }, ref) => {
-  return <table ref={ref} {...props} className={table({ className })} />;
-});
+function TableRoot({
+  className,
+  ...props
+}: ComponentProps<'table'> & VariantProps<typeof table>) {
+  return <table {...props} className={table({ className })} />;
+}
+TableRoot.displayName = 'Table';
 
 const header = cva(styles['header']);
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement> &
-    React.PropsWithChildren<VariantProps<typeof header>>
->(({ className, ...props }, ref) => {
-  return <thead ref={ref} {...props} className={header({ className })} />;
-});
+function TableHeader({
+  className,
+  ...props
+}: ComponentProps<'thead'> & VariantProps<typeof header>) {
+  return <thead {...props} className={header({ className })} />;
+}
+TableHeader.displayName = 'Table.Header';
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement> & React.PropsWithChildren
->(({ ...props }, ref) => {
-  return <tbody ref={ref} {...props} />;
-});
+function TableBody({ ...props }: ComponentProps<'tbody'>) {
+  return <tbody {...props} />;
+}
+TableBody.displayName = 'Table.Body';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement> & React.PropsWithChildren
->(({ ...props }, ref) => {
-  return <tr ref={ref} {...props} />;
-});
+function TableRow({ ...props }: ComponentProps<'tr'>) {
+  return <tr {...props} />;
+}
+TableRow.displayName = 'Table.Row';
 
 const head = cva(styles['head']);
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement> &
-    React.PropsWithChildren<VariantProps<typeof head>>
->(({ className, ...props }, ref) => {
-  return <th ref={ref} {...props} className={head({ className })} />;
-});
+function TableHead({
+  className,
+  ...props
+}: ComponentProps<'th'> & VariantProps<typeof head>) {
+  return <th {...props} className={head({ className })} />;
+}
+TableHead.displayName = 'Table.Head';
 
 const cell = cva(styles['cell']);
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement> &
-    React.PropsWithChildren<VariantProps<typeof cell>>
->(({ className, ...props }, ref) => {
-  return <td ref={ref} {...props} className={cell({ className })} />;
-});
+function TableCell({
+  className,
+  ...props
+}: ComponentProps<'td'> & VariantProps<typeof cell>) {
+  return <td {...props} className={cell({ className })} />;
+}
+TableCell.displayName = 'Table.Cell';
 
 const sectionHeader = cva(styles['sectionHeader']);
 type SectionHeaderClassNames = 'row' | 'cell';
-const SectionHeader = React.forwardRef<
-  HTMLTableRowElement,
-  React.PropsWithChildren & {
-    colSpan: number;
-    classNames?: Partial<Record<SectionHeaderClassNames, string>>;
-  }
->(({ classNames, colSpan, children }, ref) => {
+function SectionHeader({
+  classNames,
+  colSpan,
+  children,
+  ref,
+  ...rest
+}: ComponentProps<'tr'> & {
+  colSpan: number;
+  classNames?: Partial<Record<SectionHeaderClassNames, string>>;
+}) {
   return (
-    <tr ref={ref} className={sectionHeader({ className: classNames?.row })}>
+    <tr
+      ref={ref}
+      className={sectionHeader({ className: classNames?.row })}
+      {...rest}
+    >
       <th colSpan={colSpan} className={classNames?.cell}>
         {children}
       </th>
     </tr>
   );
-});
+}
+SectionHeader.displayName = 'Table.SectionHeader';
 
 export const Table = Object.assign(TableRoot, {
   Header: TableHeader,
diff --git a/packages/raystack/components/tabs/tabs.tsx b/packages/raystack/components/tabs/tabs.tsx
index 02accc043..ef58f4238 100644
--- a/packages/raystack/components/tabs/tabs.tsx
+++ b/packages/raystack/components/tabs/tabs.tsx
@@ -1,45 +1,32 @@
 import { Tabs as TabsPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styles from './tabs.module.css';
 
-const TabsRoot = forwardRef<HTMLDivElement, TabsPrimitive.Root.Props>(
-  ({ className, ...props }, ref) => (
-    <TabsPrimitive.Root
-      ref={ref}
-      className={cx(styles.root, className)}
-      {...props}
-    />
-  )
-);
-TabsRoot.displayName = 'Tabs.Root';
+function TabsRoot({ className, ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root className={cx(styles.root, className)} {...props} />
+  );
+}
+TabsRoot.displayName = 'Tabs';
 
-const TabsList = forwardRef<HTMLDivElement, TabsPrimitive.List.Props>(
-  ({ className, children, ...props }, ref) => (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cx(styles.list, className)}
-      {...props}
-    >
+function TabsList({ className, children, ...props }: TabsPrimitive.List.Props) {
+  return (
+    <TabsPrimitive.List className={cx(styles.list, className)} {...props}>
       {children}
       <TabsPrimitive.Indicator className={styles.indicator} />
     </TabsPrimitive.List>
-  )
-);
+  );
+}
 TabsList.displayName = 'Tabs.List';
 
-interface TabsTabProps
-  extends ComponentPropsWithoutRef<typeof TabsPrimitive.Tab> {
+interface TabsTabProps extends TabsPrimitive.Tab.Props {
   leadingIcon?: ReactNode;
 }
 
-const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
-  ({ className, leadingIcon, children, ...props }, ref) => (
-    <TabsPrimitive.Tab
-      ref={ref}
-      className={cx(styles.trigger, className)}
-      {...props}
-    >
+function TabsTab({ className, leadingIcon, children, ...props }: TabsTabProps) {
+  return (
+    <TabsPrimitive.Tab className={cx(styles.trigger, className)} {...props}>
       {leadingIcon && (
         <span className={styles['trigger-icon']} aria-hidden>
           {leadingIcon}
@@ -47,19 +34,15 @@ const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
       )}
       {children}
     </TabsPrimitive.Tab>
-  )
-);
+  );
+}
 TabsTab.displayName = 'Tabs.Tab';
 
-const TabsContent = forwardRef<HTMLDivElement, TabsPrimitive.Panel.Props>(
-  ({ className, ...props }, ref) => (
-    <TabsPrimitive.Panel
-      ref={ref}
-      className={cx(styles.content, className)}
-      {...props}
-    />
-  )
-);
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel className={cx(styles.content, className)} {...props} />
+  );
+}
 TabsContent.displayName = 'Tabs.Content';
 
 export const Tabs = Object.assign(TabsRoot, {
diff --git a/packages/raystack/components/text-area/text-area.tsx b/packages/raystack/components/text-area/text-area.tsx
index b29311065..9adca43f6 100644
--- a/packages/raystack/components/text-area/text-area.tsx
+++ b/packages/raystack/components/text-area/text-area.tsx
@@ -2,8 +2,7 @@
 
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva, cx } from 'class-variance-authority';
-import * as React from 'react';
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { ChangeEvent, ComponentProps } from 'react';
 import { Tooltip } from '../tooltip';
 
 import styles from './text-area.module.css';
@@ -16,8 +15,7 @@ const textArea = cva(styles.textarea, {
   }
 });
 
-export interface TextAreaProps
-  extends PropsWithChildren<HTMLAttributes<HTMLTextAreaElement>> {
+export interface TextAreaProps extends ComponentProps<'textarea'> {
   label?: string;
   required?: boolean;
   infoTooltip?: string;
@@ -26,77 +24,69 @@ export interface TextAreaProps
   disabled?: boolean;
   width?: string | number;
   value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
-const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (
-    {
-      className,
-      style,
-      label,
-      required,
-      infoTooltip,
-      helperText,
-      error,
-      disabled,
-      width = '100%',
-      value,
-      onChange,
-      placeholder,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <div className={styles.container} style={{ width }}>
-        {label && (
-          <div className={styles.labelContainer}>
-            <label
-              className={cx(styles.label, disabled && styles.labelDisabled)}
-            >
-              {label}
-              {!required && <span className={styles.optional}>(optional)</span>}
-            </label>
-            {infoTooltip && (
-              <Tooltip message={infoTooltip} side='right'>
-                <span className={styles.helpIcon}>
-                  <InfoCircledIcon />
-                </span>
-              </Tooltip>
-            )}
-          </div>
+function TextArea({
+  className,
+  style,
+  label,
+  required,
+  infoTooltip,
+  helperText,
+  error,
+  disabled,
+  width = '100%',
+  value,
+  onChange,
+  placeholder,
+  ...props
+}: TextAreaProps) {
+  return (
+    <div className={styles.container} style={{ width }}>
+      {label && (
+        <div className={styles.labelContainer}>
+          <label className={cx(styles.label, disabled && styles.labelDisabled)}>
+            {label}
+            {!required && <span className={styles.optional}>(optional)</span>}
+          </label>
+          {infoTooltip && (
+            <Tooltip message={infoTooltip} side='right'>
+              <span className={styles.helpIcon}>
+                <InfoCircledIcon />
+              </span>
+            </Tooltip>
+          )}
+        </div>
+      )}
+      <textarea
+        className={cx(
+          textArea({ error }),
+          disabled && styles.disabled,
+          className
         )}
-        <textarea
+        value={value}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+        placeholder={placeholder}
+        style={style}
+        {...props}
+      />
+      {helperText && (
+        <span
           className={cx(
-            textArea({ error }),
-            disabled && styles.disabled,
-            className
+            styles.helperText,
+            error && styles.helperTextError,
+            disabled && styles.helperTextDisabled
           )}
-          ref={ref}
-          value={value}
-          onChange={onChange}
-          required={required}
-          disabled={disabled}
-          placeholder={placeholder}
-          style={style}
-          {...props}
-        />
-        {helperText && (
-          <span
-            className={cx(
-              styles.helperText,
-              error && styles.helperTextError,
-              disabled && styles.helperTextDisabled
-            )}
-          >
-            {helperText}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
+        >
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+}
 
 TextArea.displayName = 'TextArea';
 
diff --git a/packages/raystack/components/text/text.tsx b/packages/raystack/components/text/text.tsx
index 7b1271716..bd86e1e59 100644
--- a/packages/raystack/components/text/text.tsx
+++ b/packages/raystack/components/text/text.tsx
@@ -1,5 +1,5 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 import styles from './text.module.css';
 
 export const textVariants = cva(styles.text, {
@@ -131,58 +131,48 @@ export type TextBaseProps = VariantProps<typeof textVariants> & {
     | 900;
 };
 
-type TextSpanProps = { as?: 'span' } & ComponentPropsWithoutRef<'span'>;
-type TextDivProps = { as: 'div' } & ComponentPropsWithoutRef<'div'>;
-type TextLabelProps = { as: 'label' } & ComponentPropsWithoutRef<'label'>;
-type TextPProps = { as: 'p' } & ComponentPropsWithoutRef<'p'>;
-type TextAProps = { as: 'a' } & ComponentPropsWithoutRef<'a'>;
+type TextSpanProps = { as?: 'span' } & ComponentProps<'span'>;
+type TextDivProps = { as: 'div' } & ComponentProps<'div'>;
+type TextLabelProps = { as: 'label' } & ComponentProps<'label'>;
+type TextPProps = { as: 'p' } & ComponentProps<'p'>;
+type TextAProps = { as: 'a' } & ComponentProps<'a'>;
 export type TextProps = TextBaseProps &
   (TextSpanProps | TextDivProps | TextLabelProps | TextPProps | TextAProps);
-type TextRef =
-  | HTMLSpanElement
-  | HTMLParagraphElement
-  | HTMLDivElement
-  | HTMLLabelElement
-  | HTMLAnchorElement;
 
-export const Text = forwardRef<TextRef, TextProps>(
-  (
-    {
-      className,
-      size,
-      variant,
-      weight,
-      transform,
-      align,
-      lineClamp,
-      underline,
-      strikeThrough,
-      italic,
-      as: Component = 'span',
-      children,
-      ...rest
-    },
-    ref
-  ) => {
-    const textClassName = textVariants({
-      size,
-      className,
-      weight,
-      variant,
-      transform,
-      align,
-      lineClamp,
-      underline,
-      strikeThrough,
-      italic
-    });
+export function Text({
+  className,
+  size,
+  variant,
+  weight,
+  transform,
+  align,
+  lineClamp,
+  underline,
+  strikeThrough,
+  italic,
+  as: Component = 'span',
+  children,
+  ...rest
+}: TextProps) {
+  const textClassName = textVariants({
+    size,
+    className,
+    weight,
+    variant,
+    transform,
+    align,
+    lineClamp,
+    underline,
+    strikeThrough,
+    italic
+  });
 
-    return (
-      <Component ref={ref} className={textClassName} {...rest}>
-        {children}
-      </Component>
-    );
-  }
-);
+  return (
+    // @ts-expect-error polymorphic ref
+    <Component className={textClassName} {...rest}>
+      {children}
+    </Component>
+  );
+}
 
 Text.displayName = 'Text';
diff --git a/packages/raystack/components/theme-provider/theme.tsx b/packages/raystack/components/theme-provider/theme.tsx
index 8aab4aa6c..106c21f1f 100644
--- a/packages/raystack/components/theme-provider/theme.tsx
+++ b/packages/raystack/components/theme-provider/theme.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, {
+import {
   createContext,
   Fragment,
   memo,
@@ -21,17 +21,19 @@ const defaultContext: UseThemeProps = { setTheme: _ => {}, themes: [] };
 
 export const useTheme = () => useContext(ThemeContext) ?? defaultContext;
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = props => {
+export function ThemeProvider(props: ThemeProviderProps) {
   const context = useContext(ThemeContext);
 
   // Ignore nested context providers, just passthrough children
   if (context) return <Fragment>{props.children}</Fragment>;
   return <Theme {...props} />;
-};
+}
+
+ThemeProvider.displayName = 'ThemeProvider';
 
 const defaultThemes = ['light', 'dark'];
 
-const Theme: React.FC<ThemeProviderProps> = ({
+const Theme = ({
   forcedTheme,
   disableTransitionOnChange = false,
   enableSystem = true,
@@ -46,7 +48,7 @@ const Theme: React.FC<ThemeProviderProps> = ({
   style = 'modern',
   accentColor = 'indigo',
   grayColor = 'gray'
-}) => {
+}: ThemeProviderProps) => {
   const [theme, setThemeState] = useState(() =>
     getTheme(storageKey, defaultTheme)
   );
@@ -198,7 +200,7 @@ const Theme: React.FC<ThemeProviderProps> = ({
   );
 
   return (
-    <ThemeContext.Provider value={providerValue}>
+    <ThemeContext value={providerValue}>
       <ThemeScript
         {...{
           forcedTheme,
@@ -219,7 +221,7 @@ const Theme: React.FC<ThemeProviderProps> = ({
         }}
       />
       {children}
-    </ThemeContext.Provider>
+    </ThemeContext>
   );
 };
 
diff --git a/packages/raystack/components/toast/toast-provider.tsx b/packages/raystack/components/toast/toast-provider.tsx
index f5bc78c7b..0ac14de3e 100644
--- a/packages/raystack/components/toast/toast-provider.tsx
+++ b/packages/raystack/components/toast/toast-provider.tsx
@@ -2,7 +2,6 @@
 
 import { Toast as ToastPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './toast.module.css';
 import { toastManager } from './toast-manager';
 import { ToastRoot } from './toast-root';
@@ -31,16 +30,16 @@ function ToastList({ position }: { position: ToastPosition }) {
   ));
 }
 
-export const ToastProvider = forwardRef<
-  ElementRef<typeof ToastPrimitive.Viewport>,
-  ToastProviderProps
->(({ position = 'bottom-right', children, ...props }, ref) => {
+export function ToastProvider({
+  position = 'bottom-right',
+  children,
+  ...props
+}: ToastProviderProps) {
   return (
     <ToastPrimitive.Provider toastManager={toastManager} {...props}>
       {children}
       <ToastPrimitive.Portal>
         <ToastPrimitive.Viewport
-          ref={ref}
           className={cx(styles.viewport, styles[`viewport-${position}`])}
         >
           <ToastList position={position} />
@@ -48,6 +47,6 @@ export const ToastProvider = forwardRef<
       </ToastPrimitive.Portal>
     </ToastPrimitive.Provider>
   );
-});
+}
 
 ToastProvider.displayName = 'Toast.Provider';
diff --git a/packages/raystack/components/toast/toast-root.tsx b/packages/raystack/components/toast/toast-root.tsx
index d38536458..860b280ea 100644
--- a/packages/raystack/components/toast/toast-root.tsx
+++ b/packages/raystack/components/toast/toast-root.tsx
@@ -3,7 +3,6 @@
 import { Toast as ToastPrimitive } from '@base-ui/react';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import { Button } from '../button';
 import { Flex } from '../flex';
 import { IconButton } from '../icon-button';
@@ -34,16 +33,17 @@ export interface ToastRootProps
   position?: ToastPosition;
 }
 
-export const ToastRoot = forwardRef<
-  ElementRef<typeof ToastPrimitive.Root>,
-  ToastRootProps
->(({ toast, className, position = 'bottom-right', ...props }, ref) => {
+export function ToastRoot({
+  toast,
+  className,
+  position = 'bottom-right',
+  ...props
+}: ToastRootProps) {
   const swipeDirection = getSwipeDirection(position);
   const hasDescription = !!toast.description;
 
   return (
     <ToastPrimitive.Root
-      ref={ref}
       toast={toast}
       className={cx(styles.root, className)}
       swipeDirection={swipeDirection}
@@ -82,6 +82,6 @@ export const ToastRoot = forwardRef<
       </ToastPrimitive.Content>
     </ToastPrimitive.Root>
   );
-});
+}
 
 ToastRoot.displayName = 'Toast';

From e1b7ac5467479b95e13eb77804ec4129976dddd7 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 03:47:56 +0530
Subject: [PATCH 08/11] chore: migrate components to React 19 - 7
 <noreply@anthropic.com>

---
 .../raystack/components/toggle/toggle.tsx     | 30 ++----
 .../components/tooltip/tooltip-content.tsx    | 96 +++++++++----------
 .../components/tooltip/tooltip-misc.tsx       | 10 +-
 3 files changed, 56 insertions(+), 80 deletions(-)

diff --git a/packages/raystack/components/toggle/toggle.tsx b/packages/raystack/components/toggle/toggle.tsx
index b5caf0346..e508627e3 100644
--- a/packages/raystack/components/toggle/toggle.tsx
+++ b/packages/raystack/components/toggle/toggle.tsx
@@ -3,7 +3,6 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 
 import styles from './toggle.module.css';
 
@@ -27,30 +26,21 @@ export interface ToggleProps
   size?: 1 | 2 | 3 | 4;
 }
 
-const ToggleRoot = forwardRef<ElementRef<typeof TogglePrimitive>, ToggleProps>(
-  ({ className, children, size, ...props }, ref) => (
-    <TogglePrimitive
-      ref={ref}
-      className={toggleVariants({ size, className })}
-      {...props}
-    >
+function ToggleRoot({ className, children, size, ...props }: ToggleProps) {
+  return (
+    <TogglePrimitive className={toggleVariants({ size, className })} {...props}>
       <span className={styles.toggleContent}>{children}</span>
     </TogglePrimitive>
-  )
-);
+  );
+}
 
 ToggleRoot.displayName = 'Toggle';
 
-const ToggleGroup = forwardRef<
-  ElementRef<typeof ToggleGroupPrimitive>,
-  ToggleGroupPrimitive.Props
->(({ className, ...props }, ref) => (
-  <ToggleGroupPrimitive
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+function ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {
+  return (
+    <ToggleGroupPrimitive className={cx(styles.group, className)} {...props} />
+  );
+}
 
 ToggleGroup.displayName = 'Toggle.Group';
 
diff --git a/packages/raystack/components/tooltip/tooltip-content.tsx b/packages/raystack/components/tooltip/tooltip-content.tsx
index 2e613348a..23e7fa2ff 100644
--- a/packages/raystack/components/tooltip/tooltip-content.tsx
+++ b/packages/raystack/components/tooltip/tooltip-content.tsx
@@ -2,7 +2,6 @@
 
 import { Tooltip as TooltipPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import { Text } from '../text';
 import styles from './tooltip.module.css';
 
@@ -19,58 +18,49 @@ export interface TooltipContentProps
   showArrow?: boolean;
 }
 
-export const TooltipContent = forwardRef<
-  ElementRef<typeof TooltipPrimitive.Popup>,
-  TooltipContentProps
->(
-  (
-    {
-      className,
-      children,
-      showArrow = false,
-      style,
-      render,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    return (
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Positioner
-          side='top'
-          align='center'
-          sideOffset={showArrow ? 10 : 4}
-          className={styles.positioner}
-          {...positionerProps}
+export function TooltipContent({
+  className,
+  children,
+  showArrow = false,
+  style,
+  render,
+  ...positionerProps
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        side='top'
+        align='center'
+        sideOffset={showArrow ? 10 : 4}
+        className={styles.positioner}
+        {...positionerProps}
+      >
+        <TooltipPrimitive.Popup
+          className={cx(styles.content, className)}
+          style={style}
+          render={render}
         >
-          <TooltipPrimitive.Popup
-            ref={ref}
-            className={cx(styles.content, className)}
-            style={style}
-            render={render}
-          >
-            {typeof children === 'string' ? <Text>{children}</Text> : children}
-            {showArrow && (
-              <TooltipPrimitive.Arrow className={styles.arrow}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='6'
-                  height='7'
-                  viewBox='0 0 6 7'
-                  fill='none'
-                >
-                  <path
-                    d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
-                    fill='currentColor'
-                  />
-                </svg>
-              </TooltipPrimitive.Arrow>
-            )}
-          </TooltipPrimitive.Popup>
-        </TooltipPrimitive.Positioner>
-      </TooltipPrimitive.Portal>
-    );
-  }
-);
+          {typeof children === 'string' ? <Text>{children}</Text> : children}
+          {showArrow && (
+            <TooltipPrimitive.Arrow className={styles.arrow}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                width='6'
+                height='7'
+                viewBox='0 0 6 7'
+                fill='none'
+              >
+                <path
+                  d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
+                  fill='currentColor'
+                />
+              </svg>
+            </TooltipPrimitive.Arrow>
+          )}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 TooltipContent.displayName = 'Tooltip.Content';
diff --git a/packages/raystack/components/tooltip/tooltip-misc.tsx b/packages/raystack/components/tooltip/tooltip-misc.tsx
index e273e0f2b..5f17f9839 100644
--- a/packages/raystack/components/tooltip/tooltip-misc.tsx
+++ b/packages/raystack/components/tooltip/tooltip-misc.tsx
@@ -1,16 +1,12 @@
 'use client';
 
 import { Tooltip as TooltipPrimitive } from '@base-ui/react';
-import { forwardRef } from 'react';
 
 export interface TooltipTriggerProps extends TooltipPrimitive.Trigger.Props {}
 
-export const TooltipTrigger = forwardRef<
-  HTMLButtonElement,
-  TooltipPrimitive.Trigger.Props
->((props, ref) => {
-  return <TooltipPrimitive.Trigger ref={ref} delay={200} {...props} />;
-});
+export function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger delay={200} {...props} />;
+}
 
 TooltipTrigger.displayName = 'Tooltip.Trigger';
 

From 46b516f2a9f57c9092f265140839f01e465df176 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Wed, 18 Mar 2026 04:00:36 +0530
Subject: [PATCH 09/11] chore: update version and misc fixes

---
 .../__tests__/alert-dialog.test.tsx           |  5 ++--
 .../raystack/components/command/command.tsx   | 23 ++++++++-----------
 .../components/container/container.tsx        |  2 +-
 .../context-menu/context-menu-misc.tsx        |  4 ++--
 .../dialog/__tests__/dialog.test.tsx          |  5 ++--
 .../drawer/__tests__/drawer.test.tsx          |  5 ++--
 .../popover/__tests__/popover.test.tsx        |  5 ++--
 .../switch/__tests__/switch.test.tsx          |  5 ++--
 .../components/tabs/__tests__/tabs.test.tsx   |  4 ++--
 packages/raystack/package.json                |  6 ++---
 10 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
index e72d3d1dd..586bca10c 100644
--- a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
+++ b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { type ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import styles from '../../dialog/dialog.module.css';
 import { AlertDialog } from '../alert-dialog';
@@ -17,7 +18,7 @@ const BasicAlertDialog = ({
 }: {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) => (
   <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
     <AlertDialog.Trigger>{TRIGGER_TEXT}</AlertDialog.Trigger>
diff --git a/packages/raystack/components/command/command.tsx b/packages/raystack/components/command/command.tsx
index 203e11dd1..06ea702a5 100644
--- a/packages/raystack/components/command/command.tsx
+++ b/packages/raystack/components/command/command.tsx
@@ -4,7 +4,7 @@ import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Dialog as DialogPrimitive } from 'radix-ui';
-import React from 'react';
+import { ComponentProps } from 'react';
 
 import { Dialog } from '../dialog';
 import { Flex } from '../flex';
@@ -14,7 +14,7 @@ const command = cva(styles.command);
 function CommandRoot({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+}: ComponentProps<typeof CommandPrimitive>) {
   return <CommandPrimitive className={command({ className })} {...props} />;
 }
 CommandRoot.displayName = 'Command';
@@ -35,7 +35,7 @@ const input = cva(styles.input);
 function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+}: ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <Flex
       align='center'
@@ -59,15 +59,13 @@ const list = cva(styles.list);
 function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+}: ComponentProps<typeof CommandPrimitive.List>) {
   return <CommandPrimitive.List className={list({ className })} {...props} />;
 }
 
 CommandList.displayName = 'Command.List';
 
-function CommandEmpty(
-  props: React.ComponentProps<typeof CommandPrimitive.Empty>
-) {
+function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {
   return <CommandPrimitive.Empty className={styles.empty} {...props} />;
 }
 
@@ -77,7 +75,7 @@ const group = cva(styles.group);
 function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+}: ComponentProps<typeof CommandPrimitive.Group>) {
   return <CommandPrimitive.Group className={group({ className })} {...props} />;
 }
 
@@ -87,7 +85,7 @@ const separator = cva(styles.separator);
 function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       className={separator({ className })}
@@ -101,17 +99,14 @@ const item = cva(styles.item);
 function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+}: ComponentProps<typeof CommandPrimitive.Item>) {
   return <CommandPrimitive.Item className={item({ className })} {...props} />;
 }
 
 CommandItem.displayName = 'Command.Item';
 
 const shortcut = cva(styles.shortcut);
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {
   return <span className={shortcut({ className })} {...props} />;
 };
 CommandShortcut.displayName = 'Command.Shortcut';
diff --git a/packages/raystack/components/container/container.tsx b/packages/raystack/components/container/container.tsx
index 70b528c34..c98ddce05 100644
--- a/packages/raystack/components/container/container.tsx
+++ b/packages/raystack/components/container/container.tsx
@@ -1,5 +1,5 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { ComponentProps, HTMLAttributes, PropsWithChildren } from 'react';
+import { ComponentProps } from 'react';
 
 import styles from './container.module.css';
 
diff --git a/packages/raystack/components/context-menu/context-menu-misc.tsx b/packages/raystack/components/context-menu/context-menu-misc.tsx
index e92e80034..029cac32b 100644
--- a/packages/raystack/components/context-menu/context-menu-misc.tsx
+++ b/packages/raystack/components/context-menu/context-menu-misc.tsx
@@ -2,7 +2,7 @@
 
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ComponentProps, Fragment, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, Fragment } from 'react';
 import styles from '../menu/menu.module.css';
 import { useMenuContext } from '../menu/menu-root';
 
@@ -49,7 +49,7 @@ ContextMenuLabel.displayName = 'ContextMenu.Label';
 export const ContextMenuSeparator = ({
   className,
   ...props
-}: HTMLAttributes<HTMLDivElement>) => {
+}: ComponentProps<'div'>) => {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
diff --git a/packages/raystack/components/dialog/__tests__/dialog.test.tsx b/packages/raystack/components/dialog/__tests__/dialog.test.tsx
index 893707000..01663f585 100644
--- a/packages/raystack/components/dialog/__tests__/dialog.test.tsx
+++ b/packages/raystack/components/dialog/__tests__/dialog.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { type ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import { Dialog } from '../dialog';
 import styles from '../dialog.module.css';
@@ -17,7 +18,7 @@ const BasicDialog = ({
 }: {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) => (
   <Dialog open={open} onOpenChange={onOpenChange} {...props}>
     <Dialog.Trigger>{TRIGGER_TEXT}</Dialog.Trigger>
diff --git a/packages/raystack/components/drawer/__tests__/drawer.test.tsx b/packages/raystack/components/drawer/__tests__/drawer.test.tsx
index c7d575212..00f6877bf 100644
--- a/packages/raystack/components/drawer/__tests__/drawer.test.tsx
+++ b/packages/raystack/components/drawer/__tests__/drawer.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { type ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Button } from '~/components/button';
 import { Drawer } from '../drawer';
@@ -33,7 +34,7 @@ const BasicDrawer = ({
   </Drawer>
 );
 
-async function renderAndOpenDrawer(DrawerElement: React.ReactElement) {
+async function renderAndOpenDrawer(DrawerElement: ReactElement) {
   fireEvent.click(render(DrawerElement).getByText(TRIGGER_TEXT));
 }
 
diff --git a/packages/raystack/components/popover/__tests__/popover.test.tsx b/packages/raystack/components/popover/__tests__/popover.test.tsx
index e0a43f19a..3a1cce930 100644
--- a/packages/raystack/components/popover/__tests__/popover.test.tsx
+++ b/packages/raystack/components/popover/__tests__/popover.test.tsx
@@ -1,7 +1,8 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { type ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Button } from '~/components/button';
 import { Popover } from '../popover';
@@ -22,7 +23,7 @@ const BasicPopover = ({
   </Popover>
 );
 
-async function renderAndOpenPopover(PopoverElement: React.ReactElement) {
+async function renderAndOpenPopover(PopoverElement: ReactElement) {
   fireEvent.click(render(PopoverElement).getByText(TRIGGER_TEXT));
 }
 
diff --git a/packages/raystack/components/switch/__tests__/switch.test.tsx b/packages/raystack/components/switch/__tests__/switch.test.tsx
index 51980567a..73265f919 100644
--- a/packages/raystack/components/switch/__tests__/switch.test.tsx
+++ b/packages/raystack/components/switch/__tests__/switch.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Switch } from '../switch';
 import styles from '../switch.module.css';
@@ -177,7 +178,7 @@ describe('Switch', () => {
   describe('Controlled vs Uncontrolled', () => {
     it('works as controlled component', () => {
       const Component = () => {
-        const [checked, setChecked] = React.useState(false);
+        const [checked, setChecked] = useState(false);
         return (
           <Switch
             checked={checked}
diff --git a/packages/raystack/components/tabs/__tests__/tabs.test.tsx b/packages/raystack/components/tabs/__tests__/tabs.test.tsx
index 10552d848..93f0e947f 100644
--- a/packages/raystack/components/tabs/__tests__/tabs.test.tsx
+++ b/packages/raystack/components/tabs/__tests__/tabs.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentProps } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Tabs } from '../tabs';
 import styles from '../tabs.module.css';
@@ -11,7 +11,7 @@ const CONTENT_1_TEXT = 'Content 1';
 const CONTENT_2_TEXT = 'Content 2';
 const CUSTOM_ARIA_LABEL = 'Navigation tabs';
 
-type TabsProps = ComponentPropsWithoutRef<typeof Tabs>;
+type TabsProps = ComponentProps<typeof Tabs>;
 
 const BasicTabs = ({
   defaultValue = 'tab1',
diff --git a/packages/raystack/package.json b/packages/raystack/package.json
index 79e1863d2..2bd4b88a3 100644
--- a/packages/raystack/package.json
+++ b/packages/raystack/package.json
@@ -127,9 +127,9 @@
     "react-day-picker": "^9.6.7"
   },
   "peerDependencies": {
-    "@types/react": "^18 || ^19",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "@types/react": "^19",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

From 69c7ed10ff7dec4dfe83b0fb9b474aed2df679ad Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 24 Mar 2026 12:21:04 +0530
Subject: [PATCH 10/11] feat: component improvements

---
 .../components/container/container.tsx        |  2 +-
 .../raystack/components/toolbar/toolbar.tsx   | 53 +++++++------------
 .../components/tooltip/tooltip-content.tsx    |  4 +-
 3 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/packages/raystack/components/container/container.tsx b/packages/raystack/components/container/container.tsx
index 70b528c34..c98ddce05 100644
--- a/packages/raystack/components/container/container.tsx
+++ b/packages/raystack/components/container/container.tsx
@@ -1,5 +1,5 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { ComponentProps, HTMLAttributes, PropsWithChildren } from 'react';
+import { ComponentProps } from 'react';
 
 import styles from './container.module.css';
 
diff --git a/packages/raystack/components/toolbar/toolbar.tsx b/packages/raystack/components/toolbar/toolbar.tsx
index e38aa9dab..2dc5b7bae 100644
--- a/packages/raystack/components/toolbar/toolbar.tsx
+++ b/packages/raystack/components/toolbar/toolbar.tsx
@@ -2,56 +2,43 @@
 
 import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import { Button } from '../button';
 import styles from './toolbar.module.css';
 
-const ToolbarRoot = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Root>,
-  ToolbarPrimitive.Root.Props
->(({ className, ...props }, ref) => (
-  <ToolbarPrimitive.Root
-    ref={ref}
-    className={cx(styles.root, className)}
-    {...props}
-  />
-));
+const ToolbarRoot = ({ className, ...props }: ToolbarPrimitive.Root.Props) => (
+  <ToolbarPrimitive.Root className={cx(styles.root, className)} {...props} />
+);
 ToolbarRoot.displayName = 'Toolbar';
 
-const ToolbarButton = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Button>,
-  ToolbarPrimitive.Button.Props
->((props, ref) => (
+const ToolbarButton = ({
+  className,
+  ...props
+}: ToolbarPrimitive.Button.Props) => (
   <ToolbarPrimitive.Button
-    ref={ref}
+    className={cx(styles.button, className)}
     render={<Button variant='text' color='neutral' size='small' />}
     {...props}
   />
-));
+);
 ToolbarButton.displayName = 'Toolbar.Button';
 
-const ToolbarGroup = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Group>,
-  ToolbarPrimitive.Group.Props
->(({ className, ...props }, ref) => (
-  <ToolbarPrimitive.Group
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+const ToolbarGroup = ({
+  className,
+  ...props
+}: ToolbarPrimitive.Group.Props) => (
+  <ToolbarPrimitive.Group className={cx(styles.group, className)} {...props} />
+);
 ToolbarGroup.displayName = 'Toolbar.Group';
 
-const ToolbarSeparator = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Separator>,
-  ToolbarPrimitive.Separator.Props
->(({ className, ...props }, ref) => (
+const ToolbarSeparator = ({
+  className,
+  ...props
+}: ToolbarPrimitive.Separator.Props) => (
   <ToolbarPrimitive.Separator
-    ref={ref}
     className={cx(styles.separator, className)}
     {...props}
   />
-));
+);
 ToolbarSeparator.displayName = 'Toolbar.Separator';
 
 export const Toolbar = Object.assign(ToolbarRoot, {
diff --git a/packages/raystack/components/tooltip/tooltip-content.tsx b/packages/raystack/components/tooltip/tooltip-content.tsx
index 23e7fa2ff..557648253 100644
--- a/packages/raystack/components/tooltip/tooltip-content.tsx
+++ b/packages/raystack/components/tooltip/tooltip-content.tsx
@@ -8,7 +8,7 @@ import styles from './tooltip.module.css';
 export interface TooltipContentProps
   extends Omit<
       TooltipPrimitive.Positioner.Props,
-      'className' | 'style' | 'render'
+      'className' | 'style' | 'render' | 'ref'
     >,
     TooltipPrimitive.Popup.Props {
   /**
@@ -19,6 +19,7 @@ export interface TooltipContentProps
 }
 
 export function TooltipContent({
+  ref,
   className,
   children,
   showArrow = false,
@@ -36,6 +37,7 @@ export function TooltipContent({
         {...positionerProps}
       >
         <TooltipPrimitive.Popup
+          ref={ref}
           className={cx(styles.content, className)}
           style={style}
           render={render}

From 83aaa01b5ca3ff43927af5baa23cfeb5bfa462fd Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 24 Mar 2026 12:55:50 +0530
Subject: [PATCH 11/11] feat: migrate remaining components

---
 .../raystack/components/command/command.tsx   |  32 ++---
 .../components/number-field/number-field.tsx  | 134 +++++++++---------
 2 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/packages/raystack/components/command/command.tsx b/packages/raystack/components/command/command.tsx
index 203e11dd1..cd2001448 100644
--- a/packages/raystack/components/command/command.tsx
+++ b/packages/raystack/components/command/command.tsx
@@ -1,10 +1,10 @@
 'use client';
 
+import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { Command as CommandPrimitive } from 'cmdk';
-import { Dialog as DialogPrimitive } from 'radix-ui';
-import React from 'react';
+import { type ComponentProps, ReactNode } from 'react';
 
 import { Dialog } from '../dialog';
 import { Flex } from '../flex';
@@ -14,12 +14,14 @@ const command = cva(styles.command);
 function CommandRoot({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+}: ComponentProps<typeof CommandPrimitive>) {
   return <CommandPrimitive className={command({ className })} {...props} />;
 }
 CommandRoot.displayName = 'Command';
 
-interface CommandDialogProps extends DialogPrimitive.DialogProps {}
+interface CommandDialogProps extends DialogPrimitive.Root.Props {
+  children: ReactNode;
+}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -30,12 +32,13 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
     </Dialog>
   );
 };
+CommandDialog.displayName = 'Command.Dialog';
 
 const input = cva(styles.input);
 function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+}: ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <Flex
       align='center'
@@ -59,15 +62,13 @@ const list = cva(styles.list);
 function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+}: ComponentProps<typeof CommandPrimitive.List>) {
   return <CommandPrimitive.List className={list({ className })} {...props} />;
 }
 
 CommandList.displayName = 'Command.List';
 
-function CommandEmpty(
-  props: React.ComponentProps<typeof CommandPrimitive.Empty>
-) {
+function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {
   return <CommandPrimitive.Empty className={styles.empty} {...props} />;
 }
 
@@ -77,7 +78,7 @@ const group = cva(styles.group);
 function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+}: ComponentProps<typeof CommandPrimitive.Group>) {
   return <CommandPrimitive.Group className={group({ className })} {...props} />;
 }
 
@@ -87,7 +88,7 @@ const separator = cva(styles.separator);
 function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       className={separator({ className })}
@@ -101,22 +102,19 @@ const item = cva(styles.item);
 function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+}: ComponentProps<typeof CommandPrimitive.Item>) {
   return <CommandPrimitive.Item className={item({ className })} {...props} />;
 }
 
 CommandItem.displayName = 'Command.Item';
 
 const shortcut = cva(styles.shortcut);
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {
   return <span className={shortcut({ className })} {...props} />;
 };
 CommandShortcut.displayName = 'Command.Shortcut';
 
-export const Command: any = Object.assign(CommandRoot, {
+export const Command = Object.assign(CommandRoot, {
   Dialog: CommandDialog,
   Input: CommandInput,
   List: CommandList,
diff --git a/packages/raystack/components/number-field/number-field.tsx b/packages/raystack/components/number-field/number-field.tsx
index 4f14846ac..f43bd6d0d 100644
--- a/packages/raystack/components/number-field/number-field.tsx
+++ b/packages/raystack/components/number-field/number-field.tsx
@@ -3,30 +3,24 @@
 import { NumberField as NumberFieldPrimitive } from '@base-ui/react';
 import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import {
-  createContext,
-  ElementRef,
-  forwardRef,
-  type ReactNode,
-  useContext,
-  useId
-} from 'react';
+import { type ComponentProps, createContext, useContext, useId } from 'react';
 import { Label } from '../label';
 import styles from './number-field.module.css';
 
 const NumberFieldContext = createContext<{ fieldId: string } | null>(null);
 
-const NumberFieldRoot = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Root>,
-  NumberFieldPrimitive.Root.Props & { children?: ReactNode }
->(({ className, children, id, ...props }, ref) => {
+function NumberFieldRoot({
+  className,
+  children,
+  id,
+  ...props
+}: NumberFieldPrimitive.Root.Props) {
   const generatedId = useId();
   const fieldId = id ?? generatedId;
 
   return (
-    <NumberFieldContext.Provider value={{ fieldId }}>
+    <NumberFieldContext value={{ fieldId }}>
       <NumberFieldPrimitive.Root
-        ref={ref}
         className={cx(styles.root, className)}
         id={fieldId}
         {...props}
@@ -39,61 +33,67 @@ const NumberFieldRoot = forwardRef<
           </NumberFieldPrimitive.Group>
         )}
       </NumberFieldPrimitive.Root>
-    </NumberFieldContext.Provider>
+    </NumberFieldContext>
   );
-});
+}
 NumberFieldRoot.displayName = 'NumberField';
 
-const NumberFieldGroup = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Group>,
-  NumberFieldPrimitive.Group.Props
->(({ className, ...props }, ref) => (
-  <NumberFieldPrimitive.Group
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+function NumberFieldGroup({
+  className,
+  ...props
+}: NumberFieldPrimitive.Group.Props) {
+  return (
+    <NumberFieldPrimitive.Group
+      className={cx(styles.group, className)}
+      {...props}
+    />
+  );
+}
 NumberFieldGroup.displayName = 'NumberField.Group';
 
-const NumberFieldInput = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Input>,
-  NumberFieldPrimitive.Input.Props
->(({ className, ...props }, ref) => (
-  <NumberFieldPrimitive.Input
-    ref={ref}
-    className={cx(styles.input, className)}
-    {...props}
-  />
-));
+function NumberFieldInput({
+  className,
+  ...props
+}: NumberFieldPrimitive.Input.Props) {
+  return (
+    <NumberFieldPrimitive.Input
+      className={cx(styles.input, className)}
+      {...props}
+    />
+  );
+}
 NumberFieldInput.displayName = 'NumberField.Input';
 
-const NumberFieldDecrement = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Decrement>,
-  NumberFieldPrimitive.Decrement.Props
->(({ className, children, ...props }, ref) => (
-  <NumberFieldPrimitive.Decrement
-    ref={ref}
-    className={cx(styles.decrement, className)}
-    {...props}
-  >
-    {children ?? <MinusIcon width={12} height={12} />}
-  </NumberFieldPrimitive.Decrement>
-));
+function NumberFieldDecrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cx(styles.decrement, className)}
+      {...props}
+    >
+      {children ?? <MinusIcon width={12} height={12} />}
+    </NumberFieldPrimitive.Decrement>
+  );
+}
 NumberFieldDecrement.displayName = 'NumberField.Decrement';
 
-const NumberFieldIncrement = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Increment>,
-  NumberFieldPrimitive.Increment.Props
->(({ className, children, ...props }, ref) => (
-  <NumberFieldPrimitive.Increment
-    ref={ref}
-    className={cx(styles.increment, className)}
-    {...props}
-  >
-    {children ?? <PlusIcon width={12} height={12} />}
-  </NumberFieldPrimitive.Increment>
-));
+function NumberFieldIncrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props) {
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cx(styles.increment, className)}
+      {...props}
+    >
+      {children ?? <PlusIcon width={12} height={12} />}
+    </NumberFieldPrimitive.Increment>
+  );
+}
 NumberFieldIncrement.displayName = 'NumberField.Increment';
 
 export interface NumberFieldScrubAreaProps
@@ -101,15 +101,15 @@ export interface NumberFieldScrubAreaProps
   label: string;
 }
 
-const NumberFieldScrubArea = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.ScrubArea>,
-  NumberFieldScrubAreaProps
->(({ className, label, ...props }, ref) => {
+function NumberFieldScrubArea({
+  className,
+  label,
+  ...props
+}: NumberFieldScrubAreaProps) {
   const context = useContext(NumberFieldContext);
 
   return (
     <NumberFieldPrimitive.ScrubArea
-      ref={ref}
       className={cx(styles['scrub-area'], className)}
       {...props}
     >
@@ -123,10 +123,10 @@ const NumberFieldScrubArea = forwardRef<
       </NumberFieldPrimitive.ScrubAreaCursor>
     </NumberFieldPrimitive.ScrubArea>
   );
-});
+}
 NumberFieldScrubArea.displayName = 'NumberField.ScrubArea';
 
-function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
+function CursorGrowIcon(props: ComponentProps<'svg'>) {
   return (
     <svg
       aria-hidden='true'