feat: migrate separator to base ui

apps/www/src/content/docs/components/separator/index.mdx

@@ -37,12 +37,3 @@ The Separator component supports three sizes.
 Separator can be rendered in both horizontal and vertical orientations.
 
 <Demo data={orientationDemo} />
-
-## Accessibility
-
-The Separator component follows accessibility best practices:
-
-- Uses `role="separator"` by default
-- Is marked as `decorative` for visual separation
-- Maintains proper color contrast
-- Supports proper semantic structure in both orientations

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

@@ -16,4 +16,17 @@ export interface SeparatorProps {
 
   /** Additional CSS class names. */
   className?: string;
+
+  /**
+   * Allows you to replace the component's HTML element with a different tag, or compose it with another component.
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?:
+    | React.ReactElement
+    | ((
+        props: React.HTMLAttributes<HTMLElement>,
+        state: { orientation: 'horizontal' | 'vertical' }
+      ) => React.ReactElement);
 }

packages/raystack/components/separator/__tests__/separator.test.tsx

@@ -79,28 +79,16 @@ describe('Separator', () => {
       expect(screen.getByRole('separator')).toBeInTheDocument();
     });
 
-    it('has default aria-label for horizontal separator', () => {
-      render(<Separator />);
-      const separator = screen.getByRole('separator');
-      expect(separator).toHaveAttribute('aria-label', 'horizontal separator');
-    });
-
-    it('has default aria-label for vertical separator', () => {
-      render(<Separator orientation='vertical' />);
-      const separator = screen.getByRole('separator');
-      expect(separator).toHaveAttribute('aria-label', 'vertical separator');
-    });
-
     it('supports custom aria-label', () => {
       render(<Separator aria-label='Section divider' />);
       const separator = screen.getByRole('separator');
       expect(separator).toHaveAttribute('aria-label', 'Section divider');
     });
 
-    it('is marked as decorative', () => {
+    it('has aria-orientation attribute', () => {
       render(<Separator />);
       const separator = screen.getByRole('separator');
-      expect(separator).toHaveAttribute('aria-orientation');
+      expect(separator).toHaveAttribute('aria-orientation', 'horizontal');
     });
   });
 });

packages/raystack/components/separator/separator.tsx

@@ -1,5 +1,5 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 import { cva } from 'class-variance-authority';
-import { Separator as SeparatorPrimitive } from 'radix-ui';
 
 import styles from './separator.module.css';
 
@@ -22,30 +22,22 @@ const separator = cva(styles.separator, {
   }
 });
 
-interface SeparatorProps {
-  className?: string;
-  orientation?: 'horizontal' | 'vertical';
+interface SeparatorProps extends SeparatorPrimitive.Props {
   size?: 'small' | 'half' | 'full';
   color?: 'primary' | 'secondary' | 'tertiary';
-  'aria-label'?: string;
 }
 
 export function Separator({
   className,
   orientation = 'horizontal',
   size,
   color,
-  'aria-label': ariaLabel,
   ...props
 }: SeparatorProps) {
   return (
-    <SeparatorPrimitive.Root
-      decorative
+    <SeparatorPrimitive
       orientation={orientation}
       className={separator({ size, color, className })}
-      aria-orientation={orientation}
-      aria-label={ariaLabel || `${orientation} separator`}
-      role='separator'
       {...props}
     />
   );