From cbbd2c84cf84495e3743c30e7c591e48d51420b7 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 20 Apr 2026 16:03:43 +0530
Subject: [PATCH 01/18] feat(floating-actions): add FloatingActions component

A floating bar for surfacing contextual actions (bulk-action toolbar,
row hover actions, etc.). Position-agnostic visual primitive with a
matching vertical separator; composes freely with existing Chip, Button,
and IconButton.

- Component source, styles (--rs-shadow-lifted), and tests
- Docs page with preview, bulk-actions, and icon-only demos
- Playground example and examples/page.tsx section

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/www/src/app/examples/page.tsx            | 79 ++++++++++++++++++-
 .../playground/floating-actions-examples.tsx  | 57 +++++++++++++
 apps/www/src/components/playground/index.ts   |  1 +
 .../docs/components/floating-actions/demo.ts  | 48 +++++++++++
 .../components/floating-actions/index.mdx     | 59 ++++++++++++++
 .../docs/components/floating-actions/props.ts | 18 +++++
 .../__tests__/floating-actions.test.tsx       | 77 ++++++++++++++++++
 .../floating-actions.module.css               | 18 +++++
 .../floating-actions/floating-actions.tsx     | 34 ++++++++
 .../components/floating-actions/index.tsx     |  1 +
 packages/raystack/index.tsx                   |  1 +
 11 files changed, 392 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/src/components/playground/floating-actions-examples.tsx
 create mode 100644 apps/www/src/content/docs/components/floating-actions/demo.ts
 create mode 100644 apps/www/src/content/docs/components/floating-actions/index.mdx
 create mode 100644 apps/www/src/content/docs/components/floating-actions/props.ts
 create mode 100644 packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
 create mode 100644 packages/raystack/components/floating-actions/floating-actions.module.css
 create mode 100644 packages/raystack/components/floating-actions/floating-actions.tsx
 create mode 100644 packages/raystack/components/floating-actions/index.tsx

diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index b65134762..e35feb78e 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -10,7 +10,8 @@ import {
   MixerHorizontalIcon,
   PersonIcon,
   QuestionMarkCircledIcon,
-  BellIcon as RadixBellIcon
+  BellIcon as RadixBellIcon,
+  TransformIcon
 } from '@radix-ui/react-icons';
 import {
   Amount,
@@ -20,12 +21,14 @@ import {
   Button,
   Calendar,
   Callout,
+  Chip,
   DataTable,
   DatePicker,
   Dialog,
   Drawer,
   EmptyState,
   Flex,
+  FloatingActions,
   IconButton,
   Indicator,
   InputField,
@@ -2755,6 +2758,80 @@ const Page = () => {
               </Flex>
             </Flex>
 
+            <Text
+              size='large'
+              weight='medium'
+              style={{ marginTop: '32px', marginBottom: '16px' }}
+            >
+              FloatingActions Examples
+            </Text>
+
+            <Flex direction='column' gap={6}>
+              <Flex direction='column' gap={3}>
+                <Text size='small'>Selection with actions:</Text>
+                <FloatingActions aria-label='Selection actions'>
+                  <Chip
+                    variant='outline'
+                    size='large'
+                    color='accent'
+                    leadingIcon={<TransformIcon />}
+                    isDismissible
+                  >
+                    2 selected
+                  </Chip>
+                  <FloatingActions.Separator />
+                  <Button variant='outline' color='neutral' size='small'>
+                    Move to
+                  </Button>
+                  <Button variant='outline' color='neutral' size='small'>
+                    Actions
+                  </Button>
+                </FloatingActions>
+              </Flex>
+
+              <Flex direction='column' gap={3}>
+                <Text size='small'>Multiple action groups:</Text>
+                <FloatingActions aria-label='Bulk actions'>
+                  <Chip
+                    variant='outline'
+                    size='large'
+                    color='accent'
+                    leadingIcon={<TransformIcon />}
+                    isDismissible
+                  >
+                    5 selected
+                  </Chip>
+                  <FloatingActions.Separator />
+                  <Button variant='outline' color='neutral' size='small'>
+                    Archive
+                  </Button>
+                  <Button variant='outline' color='neutral' size='small'>
+                    Move to
+                  </Button>
+                  <FloatingActions.Separator />
+                  <Button variant='outline' color='danger' size='small'>
+                    Delete
+                  </Button>
+                </FloatingActions>
+              </Flex>
+
+              <Flex direction='column' gap={3}>
+                <Text size='small'>Icon-only actions:</Text>
+                <FloatingActions aria-label='Row actions'>
+                  <IconButton variant='text' color='neutral' size='small'>
+                    <GearIcon />
+                  </IconButton>
+                  <IconButton variant='text' color='neutral' size='small'>
+                    <FileTextIcon />
+                  </IconButton>
+                  <FloatingActions.Separator />
+                  <IconButton variant='text' color='neutral' size='small'>
+                    <DotsHorizontalIcon />
+                  </IconButton>
+                </FloatingActions>
+              </Flex>
+            </Flex>
+
             <Flex justify='center' style={{ marginTop: 40 }}>
               <Button type='submit'>Submit button</Button>
             </Flex>
diff --git a/apps/www/src/components/playground/floating-actions-examples.tsx b/apps/www/src/components/playground/floating-actions-examples.tsx
new file mode 100644
index 000000000..490f0a0df
--- /dev/null
+++ b/apps/www/src/components/playground/floating-actions-examples.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { TransformIcon } from '@radix-ui/react-icons';
+import { Button, Chip, Flex, FloatingActions, Text } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function FloatingActionsExamples() {
+  return (
+    <PlaygroundLayout title='FloatingActions'>
+      <Flex direction='column' gap='large'>
+        <Text>Default:</Text>
+        <FloatingActions aria-label='Selection actions'>
+          <Chip
+            variant='outline'
+            size='large'
+            color='accent'
+            leadingIcon={<TransformIcon />}
+            isDismissible
+          >
+            2 selected
+          </Chip>
+          <FloatingActions.Separator />
+          <Button variant='outline' color='neutral' size='small'>
+            Move to
+          </Button>
+          <Button variant='outline' color='neutral' size='small'>
+            Actions
+          </Button>
+        </FloatingActions>
+
+        <Text>Multiple action groups:</Text>
+        <FloatingActions aria-label='Bulk actions'>
+          <Chip
+            variant='outline'
+            size='large'
+            color='accent'
+            leadingIcon={<TransformIcon />}
+            isDismissible
+          >
+            5 selected
+          </Chip>
+          <FloatingActions.Separator />
+          <Button variant='outline' color='neutral' size='small'>
+            Archive
+          </Button>
+          <Button variant='outline' color='neutral' size='small'>
+            Move to
+          </Button>
+          <FloatingActions.Separator />
+          <Button variant='outline' color='danger' size='small'>
+            Delete
+          </Button>
+        </FloatingActions>
+      </Flex>
+    </PlaygroundLayout>
+  );
+}
diff --git a/apps/www/src/components/playground/index.ts b/apps/www/src/components/playground/index.ts
index 9ec2f5237..22d903501 100644
--- a/apps/www/src/components/playground/index.ts
+++ b/apps/www/src/components/playground/index.ts
@@ -23,6 +23,7 @@ export * from './field-examples';
 export * from './fieldset-examples';
 export * from './filter-chip-examples';
 export * from './flex-examples';
+export * from './floating-actions-examples';
 export * from './form-examples';
 export * from './headline-examples';
 export * from './icon-button-examples';
diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
new file mode 100644
index 000000000..0b6b2f81e
--- /dev/null
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -0,0 +1,48 @@
+'use client';
+
+export const preview = {
+  type: 'code',
+  code: `<FloatingActions>
+  <Chip
+    variant="outline"
+    size="large"
+    color="accent"
+    leadingIcon={<TransformIcon />}
+    isDismissible
+  >
+    2 selected
+  </Chip>
+  <FloatingActions.Separator />
+  <Button variant="outline" color="neutral" size="small">Move to</Button>
+  <Button variant="outline" color="neutral" size="small">Actions</Button>
+</FloatingActions>`
+};
+
+export const bulkActionsDemo = {
+  type: 'code',
+  code: `<FloatingActions>
+  <Chip
+    variant="outline"
+    size="large"
+    color="accent"
+    leadingIcon={<TransformIcon />}
+    isDismissible
+  >
+    5 selected
+  </Chip>
+  <FloatingActions.Separator />
+  <Button variant="outline" color="neutral" size="small">Archive</Button>
+  <Button variant="outline" color="neutral" size="small">Move to</Button>
+  <Button variant="outline" color="danger" size="small">Delete</Button>
+</FloatingActions>`
+};
+
+export const iconOnlyDemo = {
+  type: 'code',
+  code: `<FloatingActions>
+  <IconButton variant="text" color="neutral" size="small"><Pencil2Icon /></IconButton>
+  <IconButton variant="text" color="neutral" size="small"><UploadIcon /></IconButton>
+  <FloatingActions.Separator />
+  <IconButton variant="text" color="neutral" size="small"><InfoCircledIcon /></IconButton>
+</FloatingActions>`
+};
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
new file mode 100644
index 000000000..22925f021
--- /dev/null
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -0,0 +1,59 @@
+---
+title: Floating Actions
+description: A floating bar for surfacing contextual actions, typically shown when items are selected.
+source: packages/raystack/components/floating-actions
+tag: new
+---
+
+import { preview, bulkActionsDemo, iconOnlyDemo } from "./demo.ts";
+
+<Demo data={preview} />
+
+## Anatomy
+
+Compose the bar from existing Apsara primitives. `FloatingActions` provides the container and a matching vertical separator; everything inside is freely composable.
+
+```tsx
+import { FloatingActions, Chip, Button } from '@raystack/apsara'
+
+<FloatingActions>
+  <Chip isDismissible>2 selected</Chip>
+  <FloatingActions.Separator />
+  <Button>Move to</Button>
+  <Button>Actions</Button>
+</FloatingActions>
+```
+
+## API Reference
+
+### Root
+
+The floating container. Renders as a `role="toolbar"` element by default.
+
+<auto-type-table path="./props.ts" name="FloatingActionsProps" />
+
+### Separator
+
+A vertical divider sized to the bar's content.
+
+<auto-type-table path="./props.ts" name="FloatingActionsSeparatorProps" />
+
+## Examples
+
+### Bulk actions
+
+Pair a dismissible `Chip` with action buttons to build a selection toolbar.
+
+<Demo data={bulkActionsDemo} />
+
+### Icon-only actions
+
+Use `IconButton` inside the bar for compact toolbars.
+
+<Demo data={iconOnlyDemo} />
+
+## Accessibility
+
+- The root uses `role="toolbar"` so it is announced as a group of interactive controls. Override the `role` prop when a different grouping is more appropriate.
+- The separator is marked `aria-hidden` because it has no semantic meaning.
+- Provide an `aria-label` on the root when the toolbar's purpose is not obvious from its contents (e.g. `aria-label="Selection actions"`).
diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts
new file mode 100644
index 000000000..c64a55f9e
--- /dev/null
+++ b/apps/www/src/content/docs/components/floating-actions/props.ts
@@ -0,0 +1,18 @@
+export interface FloatingActionsProps {
+  /**
+   * The ARIA role of the container.
+   * @defaultValue "toolbar"
+   */
+  role?: string;
+
+  /** Additional CSS class names. */
+  className?: string;
+
+  /** The contents of the floating bar. */
+  children?: React.ReactNode;
+}
+
+export interface FloatingActionsSeparatorProps {
+  /** Additional CSS class names. */
+  className?: string;
+}
diff --git a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
new file mode 100644
index 000000000..9bac30d59
--- /dev/null
+++ b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { describe, expect, it } from 'vitest';
+import { FloatingActions } from '../floating-actions';
+import styles from '../floating-actions.module.css';
+
+describe('FloatingActions', () => {
+  it('renders with children and a toolbar role', () => {
+    render(
+      <FloatingActions>
+        <span>content</span>
+      </FloatingActions>
+    );
+    const root = screen.getByRole('toolbar');
+    expect(root).toBeInTheDocument();
+    expect(screen.getByText('content')).toBeInTheDocument();
+  });
+
+  it('applies custom className to the root', () => {
+    render(<FloatingActions className='custom'>content</FloatingActions>);
+    const root = screen.getByRole('toolbar');
+    expect(root.className).toContain(styles.root);
+    expect(root.className).toContain('custom');
+  });
+
+  it('forwards ref to the root element', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<FloatingActions ref={ref}>content</FloatingActions>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current).toBe(screen.getByRole('toolbar'));
+  });
+
+  it('allows overriding the root role', () => {
+    render(
+      <FloatingActions role='group' aria-label='bulk'>
+        content
+      </FloatingActions>
+    );
+    expect(screen.getByRole('group', { name: 'bulk' })).toBeInTheDocument();
+  });
+
+  describe('Separator', () => {
+    it('renders a separator with the separator class', () => {
+      render(
+        <FloatingActions>
+          <FloatingActions.Separator data-testid='sep' />
+        </FloatingActions>
+      );
+      const sep = screen.getByTestId('sep');
+      expect(sep).toBeInTheDocument();
+      expect(sep.className).toContain(styles.separator);
+      expect(sep).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('applies custom className', () => {
+      render(
+        <FloatingActions>
+          <FloatingActions.Separator data-testid='sep' className='custom-sep' />
+        </FloatingActions>
+      );
+      const sep = screen.getByTestId('sep');
+      expect(sep.className).toContain(styles.separator);
+      expect(sep.className).toContain('custom-sep');
+    });
+
+    it('forwards ref', () => {
+      const ref = createRef<HTMLDivElement>();
+      render(
+        <FloatingActions>
+          <FloatingActions.Separator ref={ref} data-testid='sep' />
+        </FloatingActions>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBe(screen.getByTestId('sep'));
+    });
+  });
+});
diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
new file mode 100644
index 000000000..6e890ac4a
--- /dev/null
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -0,0 +1,18 @@
+.root {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-4) var(--rs-space-5);
+  background: var(--rs-color-background-base-primary);
+  border-radius: var(--rs-radius-2);
+  box-shadow: var(--rs-shadow-lifted);
+}
+
+.separator {
+  flex-shrink: 0;
+  width: 1px;
+  height: var(--rs-space-5);
+  background-color: var(--rs-color-border-base-primary);
+}
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
new file mode 100644
index 000000000..284e3eb7d
--- /dev/null
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { cx } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+import styles from './floating-actions.module.css';
+
+export interface FloatingActionsProps extends ComponentProps<'div'> {}
+
+const FloatingActionsRoot = ({
+  className,
+  role = 'toolbar',
+  ...props
+}: FloatingActionsProps) => (
+  <div role={role} className={cx(styles.root, className)} {...props} />
+);
+FloatingActionsRoot.displayName = 'FloatingActions';
+
+export interface FloatingActionsSeparatorProps extends ComponentProps<'div'> {}
+
+const FloatingActionsSeparator = ({
+  className,
+  ...props
+}: FloatingActionsSeparatorProps) => (
+  <div
+    aria-hidden='true'
+    className={cx(styles.separator, className)}
+    {...props}
+  />
+);
+FloatingActionsSeparator.displayName = 'FloatingActions.Separator';
+
+export const FloatingActions = Object.assign(FloatingActionsRoot, {
+  Separator: FloatingActionsSeparator
+});
diff --git a/packages/raystack/components/floating-actions/index.tsx b/packages/raystack/components/floating-actions/index.tsx
new file mode 100644
index 000000000..044709911
--- /dev/null
+++ b/packages/raystack/components/floating-actions/index.tsx
@@ -0,0 +1 @@
+export { FloatingActions } from './floating-actions';
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index 36933d4f9..cd849b3b3 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -37,6 +37,7 @@ export { Field } from './components/field';
 export { Fieldset } from './components/fieldset';
 export { FilterChip } from './components/filter-chip';
 export { Flex } from './components/flex';
+export { FloatingActions } from './components/floating-actions';
 export { Form } from './components/form';
 export { Grid } from './components/grid';
 export { Headline } from './components/headline';

From 63df3c6b8433f3b11a5747072628929f6d5c412e Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 20 Apr 2026 16:17:15 +0530
Subject: [PATCH 02/18] revert: drop FloatingActions section from
 examples/page.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Keep the component, docs, and playground — the examples/page.tsx
scratch page is out of scope for this PR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/www/src/app/examples/page.tsx | 79 +-----------------------------
 1 file changed, 1 insertion(+), 78 deletions(-)

diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index e35feb78e..b65134762 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -10,8 +10,7 @@ import {
   MixerHorizontalIcon,
   PersonIcon,
   QuestionMarkCircledIcon,
-  BellIcon as RadixBellIcon,
-  TransformIcon
+  BellIcon as RadixBellIcon
 } from '@radix-ui/react-icons';
 import {
   Amount,
@@ -21,14 +20,12 @@ import {
   Button,
   Calendar,
   Callout,
-  Chip,
   DataTable,
   DatePicker,
   Dialog,
   Drawer,
   EmptyState,
   Flex,
-  FloatingActions,
   IconButton,
   Indicator,
   InputField,
@@ -2758,80 +2755,6 @@ const Page = () => {
               </Flex>
             </Flex>
 
-            <Text
-              size='large'
-              weight='medium'
-              style={{ marginTop: '32px', marginBottom: '16px' }}
-            >
-              FloatingActions Examples
-            </Text>
-
-            <Flex direction='column' gap={6}>
-              <Flex direction='column' gap={3}>
-                <Text size='small'>Selection with actions:</Text>
-                <FloatingActions aria-label='Selection actions'>
-                  <Chip
-                    variant='outline'
-                    size='large'
-                    color='accent'
-                    leadingIcon={<TransformIcon />}
-                    isDismissible
-                  >
-                    2 selected
-                  </Chip>
-                  <FloatingActions.Separator />
-                  <Button variant='outline' color='neutral' size='small'>
-                    Move to
-                  </Button>
-                  <Button variant='outline' color='neutral' size='small'>
-                    Actions
-                  </Button>
-                </FloatingActions>
-              </Flex>
-
-              <Flex direction='column' gap={3}>
-                <Text size='small'>Multiple action groups:</Text>
-                <FloatingActions aria-label='Bulk actions'>
-                  <Chip
-                    variant='outline'
-                    size='large'
-                    color='accent'
-                    leadingIcon={<TransformIcon />}
-                    isDismissible
-                  >
-                    5 selected
-                  </Chip>
-                  <FloatingActions.Separator />
-                  <Button variant='outline' color='neutral' size='small'>
-                    Archive
-                  </Button>
-                  <Button variant='outline' color='neutral' size='small'>
-                    Move to
-                  </Button>
-                  <FloatingActions.Separator />
-                  <Button variant='outline' color='danger' size='small'>
-                    Delete
-                  </Button>
-                </FloatingActions>
-              </Flex>
-
-              <Flex direction='column' gap={3}>
-                <Text size='small'>Icon-only actions:</Text>
-                <FloatingActions aria-label='Row actions'>
-                  <IconButton variant='text' color='neutral' size='small'>
-                    <GearIcon />
-                  </IconButton>
-                  <IconButton variant='text' color='neutral' size='small'>
-                    <FileTextIcon />
-                  </IconButton>
-                  <FloatingActions.Separator />
-                  <IconButton variant='text' color='neutral' size='small'>
-                    <DotsHorizontalIcon />
-                  </IconButton>
-                </FloatingActions>
-              </Flex>
-            </Flex>
-
             <Flex justify='center' style={{ marginTop: 40 }}>
               <Button type='submit'>Submit button</Button>
             </Flex>

From bbc06800be891b74db0880505581265b1113ce2e Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 20 Apr 2026 16:20:02 +0530
Subject: [PATCH 03/18] refactor(floating-actions): delegate Separator to
 existing primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FloatingActions.Separator now wraps `Separator` from the design system
with `orientation="vertical"` and `size="full"` defaults, instead of
re-implementing a local 1px×16px div. Drops the local `.separator`
CSS class and picks up proper `role="separator"` semantics, size/color
variants, and Base UI behavior for free.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../__tests__/floating-actions.test.tsx       | 28 ++++++++-----------
 .../floating-actions.module.css               |  7 -----
 .../floating-actions/floating-actions.tsx     | 12 ++++----
 3 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
index 9bac30d59..828a91977 100644
--- a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
+++ b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
@@ -40,7 +40,7 @@ describe('FloatingActions', () => {
   });
 
   describe('Separator', () => {
-    it('renders a separator with the separator class', () => {
+    it('renders a vertical separator by default', () => {
       render(
         <FloatingActions>
           <FloatingActions.Separator data-testid='sep' />
@@ -48,30 +48,24 @@ describe('FloatingActions', () => {
       );
       const sep = screen.getByTestId('sep');
       expect(sep).toBeInTheDocument();
-      expect(sep.className).toContain(styles.separator);
-      expect(sep).toHaveAttribute('aria-hidden', 'true');
+      expect(sep).toHaveAttribute('data-orientation', 'vertical');
     });
 
-    it('applies custom className', () => {
+    it('accepts Separator props (orientation, size, color, className)', () => {
       render(
         <FloatingActions>
-          <FloatingActions.Separator data-testid='sep' className='custom-sep' />
+          <FloatingActions.Separator
+            data-testid='sep'
+            orientation='horizontal'
+            size='small'
+            color='secondary'
+            className='custom-sep'
+          />
         </FloatingActions>
       );
       const sep = screen.getByTestId('sep');
-      expect(sep.className).toContain(styles.separator);
+      expect(sep).toHaveAttribute('data-orientation', 'horizontal');
       expect(sep.className).toContain('custom-sep');
     });
-
-    it('forwards ref', () => {
-      const ref = createRef<HTMLDivElement>();
-      render(
-        <FloatingActions>
-          <FloatingActions.Separator ref={ref} data-testid='sep' />
-        </FloatingActions>
-      );
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
-      expect(ref.current).toBe(screen.getByTestId('sep'));
-    });
   });
 });
diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
index 6e890ac4a..e7c6e6326 100644
--- a/packages/raystack/components/floating-actions/floating-actions.module.css
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -9,10 +9,3 @@
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-lifted);
 }
-
-.separator {
-  flex-shrink: 0;
-  width: 1px;
-  height: var(--rs-space-5);
-  background-color: var(--rs-color-border-base-primary);
-}
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
index 284e3eb7d..b31d2f635 100644
--- a/packages/raystack/components/floating-actions/floating-actions.tsx
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -2,6 +2,7 @@
 
 import { cx } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
+import { Separator } from '../separator';
 import styles from './floating-actions.module.css';
 
 export interface FloatingActionsProps extends ComponentProps<'div'> {}
@@ -15,17 +16,14 @@ const FloatingActionsRoot = ({
 );
 FloatingActionsRoot.displayName = 'FloatingActions';
 
-export interface FloatingActionsSeparatorProps extends ComponentProps<'div'> {}
+export type FloatingActionsSeparatorProps = ComponentProps<typeof Separator>;
 
 const FloatingActionsSeparator = ({
-  className,
+  orientation = 'vertical',
+  size = 'full',
   ...props
 }: FloatingActionsSeparatorProps) => (
-  <div
-    aria-hidden='true'
-    className={cx(styles.separator, className)}
-    {...props}
-  />
+  <Separator orientation={orientation} size={size} {...props} />
 );
 FloatingActionsSeparator.displayName = 'FloatingActions.Separator';
 

From 9254ab8d882ada0e34b96910be1f117de600f430 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 20 Apr 2026 16:26:00 +0530
Subject: [PATCH 04/18] refactor(floating-actions): lock Separator to vertical
 orientation

The floating bar is horizontal-only, so the separator is always
vertical. `Omit<..., 'orientation'>` from the prop type and drop the
unused horizontal CSS rule. Scoped `.separator` class overrides the
Separator primitive's size variant to --rs-space-5 per the Figma spec.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../__tests__/floating-actions.test.tsx            |  7 +++----
 .../floating-actions/floating-actions.module.css   |  4 ++++
 .../floating-actions/floating-actions.tsx          | 14 ++++++++++----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
index 828a91977..82ae50b42 100644
--- a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
+++ b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
@@ -40,7 +40,7 @@ describe('FloatingActions', () => {
   });
 
   describe('Separator', () => {
-    it('renders a vertical separator by default', () => {
+    it('renders a vertical separator', () => {
       render(
         <FloatingActions>
           <FloatingActions.Separator data-testid='sep' />
@@ -49,14 +49,14 @@ describe('FloatingActions', () => {
       const sep = screen.getByTestId('sep');
       expect(sep).toBeInTheDocument();
       expect(sep).toHaveAttribute('data-orientation', 'vertical');
+      expect(sep.className).toContain(styles.separator);
     });
 
-    it('accepts Separator props (orientation, size, color, className)', () => {
+    it('accepts Separator props (size, color, className)', () => {
       render(
         <FloatingActions>
           <FloatingActions.Separator
             data-testid='sep'
-            orientation='horizontal'
             size='small'
             color='secondary'
             className='custom-sep'
@@ -64,7 +64,6 @@ describe('FloatingActions', () => {
         </FloatingActions>
       );
       const sep = screen.getByTestId('sep');
-      expect(sep).toHaveAttribute('data-orientation', 'horizontal');
       expect(sep.className).toContain('custom-sep');
     });
   });
diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
index e7c6e6326..57a703a03 100644
--- a/packages/raystack/components/floating-actions/floating-actions.module.css
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -9,3 +9,7 @@
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-lifted);
 }
+
+.separator.separator {
+  height: var(--rs-space-5);
+}
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
index b31d2f635..a35796794 100644
--- a/packages/raystack/components/floating-actions/floating-actions.tsx
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -16,14 +16,20 @@ const FloatingActionsRoot = ({
 );
 FloatingActionsRoot.displayName = 'FloatingActions';
 
-export type FloatingActionsSeparatorProps = ComponentProps<typeof Separator>;
+export type FloatingActionsSeparatorProps = Omit<
+  ComponentProps<typeof Separator>,
+  'orientation'
+>;
 
 const FloatingActionsSeparator = ({
-  orientation = 'vertical',
-  size = 'full',
+  className,
   ...props
 }: FloatingActionsSeparatorProps) => (
-  <Separator orientation={orientation} size={size} {...props} />
+  <Separator
+    orientation='vertical'
+    className={cx(styles.separator, className)}
+    {...props}
+  />
 );
 FloatingActionsSeparator.displayName = 'FloatingActions.Separator';
 

From 1defea702f6ada52f025115bfc61bd5249ec5935 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 20 Apr 2026 16:28:21 +0530
Subject: [PATCH 05/18] refactor(floating-actions): update separator class to
 use data attribute for vertical orientation

---
 .../components/floating-actions/floating-actions.module.css     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
index 57a703a03..9a4c3495e 100644
--- a/packages/raystack/components/floating-actions/floating-actions.module.css
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -10,6 +10,6 @@
   box-shadow: var(--rs-shadow-lifted);
 }
 
-.separator.separator {
+.separator[data-orientation="vertical"] {
   height: var(--rs-space-5);
 }

From b614f178ef3bb3887688cf2aae585c8bd79f58d8 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 20 Apr 2026 16:34:11 +0530
Subject: [PATCH 06/18] refactor(floating-actions): update separator role and
 accessibility attributes

---
 .../src/content/docs/components/floating-actions/index.mdx  | 2 +-
 .../floating-actions/__tests__/floating-actions.test.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 22925f021..7734f9608 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -55,5 +55,5 @@ Use `IconButton` inside the bar for compact toolbars.
 ## Accessibility
 
 - The root uses `role="toolbar"` so it is announced as a group of interactive controls. Override the `role` prop when a different grouping is more appropriate.
-- The separator is marked `aria-hidden` because it has no semantic meaning.
+- The separator renders with `role="separator"` and `aria-orientation="vertical"` via the Base UI primitive, communicating structural grouping between action clusters.
 - Provide an `aria-label` on the root when the toolbar's purpose is not obvious from its contents (e.g. `aria-label="Selection actions"`).
diff --git a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
index 82ae50b42..4eb3d3e74 100644
--- a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
+++ b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
@@ -40,7 +40,7 @@ describe('FloatingActions', () => {
   });
 
   describe('Separator', () => {
-    it('renders a vertical separator', () => {
+    it('renders a vertical separator with role="separator"', () => {
       render(
         <FloatingActions>
           <FloatingActions.Separator data-testid='sep' />
@@ -48,16 +48,16 @@ describe('FloatingActions', () => {
       );
       const sep = screen.getByTestId('sep');
       expect(sep).toBeInTheDocument();
+      expect(sep).toHaveAttribute('role', 'separator');
       expect(sep).toHaveAttribute('data-orientation', 'vertical');
       expect(sep.className).toContain(styles.separator);
     });
 
-    it('accepts Separator props (size, color, className)', () => {
+    it('passes through Separator props (color, className)', () => {
       render(
         <FloatingActions>
           <FloatingActions.Separator
             data-testid='sep'
-            size='small'
             color='secondary'
             className='custom-sep'
           />

From fe75605f7044361653c75a7db8e4ec27ce75f62b Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Tue, 21 Apr 2026 09:05:45 +0530
Subject: [PATCH 07/18] docs(floating-actions): add row-selection pattern with
 DataTable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a new "Row selection" section in the DataTable docs showing the
recommended pattern for integrating FloatingActions with TanStack row
selection:
- leading checkbox column wired via row.toggleSelected / getIsSelected
- SelectionBar that reads useDataTable().table.getSelectedRowModel()
- FloatingActions overlay with dismissible count chip
  (onDismiss → table.resetRowSelection)

Ships a live demo (DataTableSelectionDemo) registered in the Demo
scope, plus a cross-reference from the FloatingActions docs. Also
adds matching horizontal padding on DataTable's toolbar so filter /
display controls align with cell content.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/datatable-selection-demo.tsx   | 156 ++++++++++++++++++
 apps/www/src/components/demo/demo.tsx         |   2 +
 .../content/docs/components/datatable/demo.ts |   5 +
 .../docs/components/datatable/index.mdx       | 109 +++++++++++-
 .../components/floating-actions/index.mdx     |   4 +
 .../data-table/data-table.module.css          |   2 +-
 6 files changed, 276 insertions(+), 2 deletions(-)
 create mode 100644 apps/www/src/components/datatable-selection-demo.tsx

diff --git a/apps/www/src/components/datatable-selection-demo.tsx b/apps/www/src/components/datatable-selection-demo.tsx
new file mode 100644
index 000000000..feaaee60d
--- /dev/null
+++ b/apps/www/src/components/datatable-selection-demo.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { TransformIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Checkbox,
+  Chip,
+  DataTable,
+  type DataTableColumnDef,
+  FloatingActions,
+  useDataTable
+} from '@raystack/apsara';
+import { useEffect, useMemo } from 'react';
+
+type Row = {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  team: string;
+};
+
+const names = [
+  'Alice Ross',
+  'Bob Evans',
+  'Clara Patel',
+  'David Kim',
+  'Elena Moreno',
+  'Finn O’Connor',
+  'Grace Tan',
+  'Henry Novak',
+  'Ivy Chen',
+  'Jason Park'
+];
+const roles = ['Admin', 'Editor', 'Viewer'];
+const teams = ['Engineering', 'Design', 'Product', 'Marketing', 'Sales'];
+
+const selectionColumn: DataTableColumnDef<Row, unknown> = {
+  id: 'select',
+  accessorKey: 'select',
+  header: '',
+  cell: ({ row }) => (
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={value => row.toggleSelected(Boolean(value))}
+      aria-label='Select row'
+      onClick={e => e.stopPropagation()}
+    />
+  ),
+  enableColumnFilter: false,
+  enableSorting: false,
+  enableHiding: false,
+  styles: {
+    cell: { width: 40, flex: 'none' },
+    header: { width: 40, flex: 'none' }
+  }
+};
+
+const columns: DataTableColumnDef<Row, unknown>[] = [
+  selectionColumn,
+  { accessorKey: 'name', header: 'Name', enableColumnFilter: true },
+  { accessorKey: 'email', header: 'Email', enableColumnFilter: true },
+  { accessorKey: 'role', header: 'Role', enableColumnFilter: true },
+  { accessorKey: 'team', header: 'Team', enableColumnFilter: true }
+];
+
+function InitialSelection() {
+  const { table } = useDataTable();
+  useEffect(() => {
+    table.setRowSelection({ '1': true, '3': true });
+  }, [table]);
+  return null;
+}
+
+function SelectionBar() {
+  const { table } = useDataTable();
+  const selected = table.getSelectedRowModel().rows;
+  if (selected.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 'var(--rs-space-9)',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 2
+      }}
+    >
+      <FloatingActions aria-label='Selection actions'>
+        <Chip
+          variant='outline'
+          size='large'
+          color='neutral'
+          leadingIcon={<TransformIcon />}
+          isDismissible
+          onDismiss={() => table.resetRowSelection()}
+        >
+          {selected.length} selected
+        </Chip>
+        <FloatingActions.Separator />
+        <Button variant='outline' color='neutral' size='small'>
+          Move to
+        </Button>
+        <Button variant='outline' color='neutral' size='small'>
+          Actions
+        </Button>
+      </FloatingActions>
+    </div>
+  );
+}
+
+const DataTableSelectionDemo = () => {
+  const data = useMemo<Row[]>(
+    () =>
+      Array.from({ length: 80 }, (_, i) => {
+        const name = names[i % names.length];
+        const handle = name.toLowerCase().replace(/[^a-z]/g, '');
+        return {
+          id: String(i + 1),
+          name,
+          email: `${handle}${i + 1}@example.com`,
+          role: roles[i % roles.length],
+          team: teams[i % teams.length]
+        };
+      }),
+    []
+  );
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: 760,
+        width: '100%',
+        overflow: 'hidden'
+      }}
+    >
+      <DataTable
+        data={data}
+        columns={columns}
+        mode='client'
+        defaultSort={{ name: 'name', order: 'asc' }}
+        getRowId={row => row.id}
+      >
+        <DataTable.Toolbar />
+        <DataTable.Content classNames={{ root: 'dt-selection-demo-scroll' }} />
+        <InitialSelection />
+        <SelectionBar />
+      </DataTable>
+      <style>{`.dt-selection-demo-scroll { padding-bottom: 160px; }`}</style>
+    </div>
+  );
+};
+
+export default DataTableSelectionDemo;
diff --git a/apps/www/src/components/demo/demo.tsx b/apps/www/src/components/demo/demo.tsx
index b59bbf2c0..2b4f0df69 100644
--- a/apps/www/src/components/demo/demo.tsx
+++ b/apps/www/src/components/demo/demo.tsx
@@ -26,6 +26,7 @@ import { Home, Info, Laugh, X } from 'lucide-react';
 import NextLink from 'next/link';
 import { Suspense } from 'react';
 import DataTableDemo from '../datatable-demo';
+import DataTableSelectionDemo from '../datatable-selection-demo';
 import LinearMenuDemo from '../linear-dropdown-demo';
 import PopoverColorPicker from '../popover-color-picker';
 import DemoPlayground from './demo-playground';
@@ -43,6 +44,7 @@ export default function Demo(props: DemoProps) {
       OrganizationIcon,
       SidebarIcon,
       DataTableDemo,
+      DataTableSelectionDemo,
       LinearMenuDemo,
       PopoverColorPicker,
       Info,
diff --git a/apps/www/src/content/docs/components/datatable/demo.ts b/apps/www/src/content/docs/components/datatable/demo.ts
index bc3aa9e87..90dcecfd2 100644
--- a/apps/www/src/content/docs/components/datatable/demo.ts
+++ b/apps/www/src/content/docs/components/datatable/demo.ts
@@ -4,3 +4,8 @@ export const preview = {
   type: 'code',
   code: `<DataTableDemo />`
 };
+
+export const rowSelectionDemo = {
+  type: 'code',
+  code: `<DataTableSelectionDemo />`
+};
diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index e865648c1..ebe31f86d 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -4,7 +4,7 @@ description: An advanced React table that supports filtering, sorting, and pagin
 source: packages/raystack/components/datatable
 ---
 
-import { preview } from "./demo.ts";
+import { preview, rowSelectionDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
@@ -470,6 +470,113 @@ import { OrganizationIcon, FilterIcon } from "@raystack/apsara/icons";
 />
 ```
 
+### Row selection
+
+DataTable does not ship a built-in selection toolbar, but the underlying TanStack table instance is exposed via `useDataTable()`, so you can wire row selection yourself and float an [`FloatingActions`](./floating-actions) bar over the table when rows are selected.
+
+<Demo data={rowSelectionDemo} />
+
+Add a leading checkbox column to enable selection, then render a `FloatingActions` overlay driven by `table.getSelectedRowModel()`:
+
+```tsx
+import {
+  Button,
+  Checkbox,
+  Chip,
+  DataTable,
+  FloatingActions,
+  useDataTable,
+} from "@raystack/apsara";
+import { TransformIcon } from "@radix-ui/react-icons";
+
+// 1. Leading checkbox column that wires TanStack selection.
+const selectionColumn = {
+  id: "select",
+  header: ({ table }) => (
+    <Checkbox
+      checked={
+        table.getIsAllRowsSelected()
+          ? true
+          : table.getIsSomeRowsSelected()
+          ? "indeterminate"
+          : false
+      }
+      onCheckedChange={(v) => table.toggleAllRowsSelected(Boolean(v))}
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={(v) => row.toggleSelected(Boolean(v))}
+      onClick={(e) => e.stopPropagation()}
+    />
+  ),
+  enableSorting: false,
+  enableColumnFilter: false,
+  enableHiding: false,
+};
+
+// 2. Render the overlay bar alongside DataTable, reading selection from context.
+function SelectionBar() {
+  const { table } = useDataTable();
+  const selected = table.getSelectedRowModel().rows;
+  if (selected.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        bottom: "var(--rs-space-9)",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 2,
+      }}
+    >
+      <FloatingActions aria-label="Selection actions">
+        <Chip
+          variant="outline"
+          size="large"
+          color="neutral"
+          leadingIcon={<TransformIcon />}
+          isDismissible
+          onDismiss={() => table.resetRowSelection()}
+        >
+          {selected.length} selected
+        </Chip>
+        <FloatingActions.Separator />
+        <Button variant="outline" color="neutral" size="small">
+          Move to
+        </Button>
+        <Button variant="outline" color="neutral" size="small">
+          Actions
+        </Button>
+      </FloatingActions>
+    </div>
+  );
+}
+
+// 3. Compose. The wrapping element must be `position: relative` so the
+// overlay anchors to the table region (not the viewport).
+<div style={{ position: "relative", flex: 1, minHeight: 0 }}>
+  <DataTable
+    data={rows}
+    columns={[selectionColumn, ...columns]}
+    mode="client"
+    defaultSort={{ name: "name", order: "asc" }}
+  >
+    <DataTable.Toolbar />
+    <DataTable.Search />
+    <DataTable.Content />
+    <SelectionBar />
+  </DataTable>
+</div>
+```
+
+Notes:
+- `table.resetRowSelection()` clears the selection; wire it to `Chip`'s `onDismiss`.
+- The overlay uses `position: absolute` on the parent wrapper, so the last row of data isn't hidden behind it — if your table is tall, add `padding-bottom` on `DataTable.Content`'s scroll container to match.
+- When DataTable ships first-class row selection, this pattern will migrate to a selection-aware helper; the user-level API (the chip + buttons inside `FloatingActions`) stays the same.
+
 ## Accessibility
 
 - Uses semantic `table`, `thead`, `tbody`, `tr`, `th`, and `td` elements
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 7734f9608..ee7b62a13 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -52,6 +52,10 @@ Use `IconButton` inside the bar for compact toolbars.
 
 <Demo data={iconOnlyDemo} />
 
+### Use with DataTable
+
+For the row-selection pattern — rendering this bar over a `DataTable` and wiring it to selected rows — see [DataTable → Row selection](../datatable#row-selection).
+
 ## Accessibility
 
 - The root uses `role="toolbar"` so it is announced as a group of interactive controls. Override the `role` prop when a different grouping is more appropriate.
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index a092ca268..c681a36aa 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -1,5 +1,5 @@
 .toolbar {
-  padding: var(--rs-space-3) 0;
+  padding: var(--rs-space-3);
   align-self: stretch;
 
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);

From c9d9d9628e65170604c45d5b9c34c979d7e0ab17 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 09:06:50 +0530
Subject: [PATCH 08/18] feat(floating-actions): add inline and floating
 variants

Introduce variant, side, and align props so the component owns its
positioning instead of pushing it onto consumers. Floating is the
default and pins the bar to the viewport via position: fixed,
mirroring Toast's data-position pattern. Inline preserves the prior
in-flow behaviour for embedded contexts (cards, tables, docs demos).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../playground/floating-actions-examples.tsx  | 34 ++++++++++++++----
 .../docs/components/floating-actions/demo.ts  | 34 +++++++++++++-----
 .../components/floating-actions/index.mdx     | 22 +++++++++---
 .../docs/components/floating-actions/props.ts | 26 ++++++++++++++
 .../__tests__/floating-actions.test.tsx       | 25 +++++++++++++
 .../floating-actions.module.css               | 29 +++++++++++++++
 .../floating-actions/floating-actions.tsx     | 36 +++++++++++++++++--
 7 files changed, 185 insertions(+), 21 deletions(-)

diff --git a/apps/www/src/components/playground/floating-actions-examples.tsx b/apps/www/src/components/playground/floating-actions-examples.tsx
index 490f0a0df..9b0f0edcc 100644
--- a/apps/www/src/components/playground/floating-actions-examples.tsx
+++ b/apps/www/src/components/playground/floating-actions-examples.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { TransformIcon } from '@radix-ui/react-icons';
+import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { Button, Chip, Flex, FloatingActions, Text } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
@@ -8,13 +8,13 @@ export function FloatingActionsExamples() {
   return (
     <PlaygroundLayout title='FloatingActions'>
       <Flex direction='column' gap='large'>
-        <Text>Default:</Text>
-        <FloatingActions aria-label='Selection actions'>
+        <Text>Inline:</Text>
+        <FloatingActions variant='inline' aria-label='Selection actions'>
           <Chip
             variant='outline'
             size='large'
             color='accent'
-            leadingIcon={<TransformIcon />}
+            leadingIcon={<CheckCircledIcon />}
             isDismissible
           >
             2 selected
@@ -28,13 +28,13 @@ export function FloatingActionsExamples() {
           </Button>
         </FloatingActions>
 
-        <Text>Multiple action groups:</Text>
-        <FloatingActions aria-label='Bulk actions'>
+        <Text>Inline — multiple action groups:</Text>
+        <FloatingActions variant='inline' aria-label='Bulk actions'>
           <Chip
             variant='outline'
             size='large'
             color='accent'
-            leadingIcon={<TransformIcon />}
+            leadingIcon={<CheckCircledIcon />}
             isDismissible
           >
             5 selected
@@ -51,6 +51,26 @@ export function FloatingActionsExamples() {
             Delete
           </Button>
         </FloatingActions>
+
+        <Text>Floating (default) — pins to bottom-center of the viewport:</Text>
+        <FloatingActions aria-label='Floating selection actions'>
+          <Chip
+            variant='outline'
+            size='large'
+            color='accent'
+            leadingIcon={<CheckCircledIcon />}
+            isDismissible
+          >
+            2 selected
+          </Chip>
+          <FloatingActions.Separator />
+          <Button variant='outline' color='neutral' size='small'>
+            Move to
+          </Button>
+          <Button variant='outline' color='neutral' size='small'>
+            Actions
+          </Button>
+        </FloatingActions>
       </Flex>
     </PlaygroundLayout>
   );
diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index 0b6b2f81e..8097629ac 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -2,12 +2,30 @@
 
 export const preview = {
   type: 'code',
-  code: `<FloatingActions>
+  code: `<FloatingActions variant="inline" aria-label="Selection actions">
   <Chip
     variant="outline"
     size="large"
     color="accent"
-    leadingIcon={<TransformIcon />}
+    leadingIcon={<CheckCircledIcon />}
+    isDismissible
+  >
+    2 selected
+  </Chip>
+  <FloatingActions.Separator />
+  <Button variant="outline" color="neutral" size="small">Move to</Button>
+  <Button variant="outline" color="neutral" size="small">Actions</Button>
+</FloatingActions>`
+};
+
+export const floatingDemo = {
+  type: 'code',
+  code: `<FloatingActions side="bottom" align="center" aria-label="Selection actions">
+  <Chip
+    variant="outline"
+    size="large"
+    color="accent"
+    leadingIcon={<CheckCircledIcon />}
     isDismissible
   >
     2 selected
@@ -20,12 +38,12 @@ export const preview = {
 
 export const bulkActionsDemo = {
   type: 'code',
-  code: `<FloatingActions>
+  code: `<FloatingActions variant="inline" aria-label="Bulk actions">
   <Chip
     variant="outline"
     size="large"
     color="accent"
-    leadingIcon={<TransformIcon />}
+    leadingIcon={<CheckCircledIcon />}
     isDismissible
   >
     5 selected
@@ -39,10 +57,10 @@ export const bulkActionsDemo = {
 
 export const iconOnlyDemo = {
   type: 'code',
-  code: `<FloatingActions>
-  <IconButton variant="text" color="neutral" size="small"><Pencil2Icon /></IconButton>
-  <IconButton variant="text" color="neutral" size="small"><UploadIcon /></IconButton>
+  code: `<FloatingActions variant="inline" aria-label="Row actions">
+  <IconButton aria-label="Edit" variant="text" color="neutral" size="small"><Pencil2Icon /></IconButton>
+  <IconButton aria-label="Upload" variant="text" color="neutral" size="small"><UploadIcon /></IconButton>
   <FloatingActions.Separator />
-  <IconButton variant="text" color="neutral" size="small"><InfoCircledIcon /></IconButton>
+  <IconButton aria-label="More info" variant="text" color="neutral" size="small"><InfoCircledIcon /></IconButton>
 </FloatingActions>`
 };
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 7734f9608..3b98f88e0 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -5,18 +5,18 @@ source: packages/raystack/components/floating-actions
 tag: new
 ---
 
-import { preview, bulkActionsDemo, iconOnlyDemo } from "./demo.ts";
+import { preview, floatingDemo, bulkActionsDemo, iconOnlyDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
 ## Anatomy
 
-Compose the bar from existing Apsara primitives. `FloatingActions` provides the container and a matching vertical separator; everything inside is freely composable.
+Import and assemble the component along with other primitives. `FloatingActions` provides the container (built on top of [`Separator`](/docs/components/separator) for the divider); everything inside is freely composable.
 
 ```tsx
 import { FloatingActions, Chip, Button } from '@raystack/apsara'
 
-<FloatingActions>
+<FloatingActions aria-label="Selection actions">
   <Chip isDismissible>2 selected</Chip>
   <FloatingActions.Separator />
   <Button>Move to</Button>
@@ -28,7 +28,7 @@ import { FloatingActions, Chip, Button } from '@raystack/apsara'
 
 ### Root
 
-The floating container. Renders as a `role="toolbar"` element by default.
+The container. Renders as a `role="toolbar"` element by default and pins itself to the viewport (`variant="floating"`).
 
 <auto-type-table path="./props.ts" name="FloatingActionsProps" />
 
@@ -38,6 +38,20 @@ A vertical divider sized to the bar's content.
 
 <auto-type-table path="./props.ts" name="FloatingActionsSeparatorProps" />
 
+## Variants
+
+### Floating
+
+The default. Renders with `position: fixed` and is anchored to the viewport via `side` and `align`. Use this when the bar should follow the user as the page scrolls (bulk-selection toolbars, contextual action trays).
+
+<Demo data={floatingDemo} />
+
+### Inline
+
+Opt out of viewport positioning when you want the bar to flow with surrounding content (e.g. inside a card, table cell, or storybook frame).
+
+<Demo data={preview} />
+
 ## Examples
 
 ### Bulk actions
diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts
index c64a55f9e..84a164408 100644
--- a/apps/www/src/content/docs/components/floating-actions/props.ts
+++ b/apps/www/src/content/docs/components/floating-actions/props.ts
@@ -1,4 +1,24 @@
 export interface FloatingActionsProps {
+  /**
+   * Visual layout. `floating` pins the bar to the viewport via
+   * `position: fixed`; `inline` renders in normal document flow.
+   * @defaultValue "floating"
+   */
+  variant?: 'inline' | 'floating';
+
+  /**
+   * Vertical edge to anchor to. Only applies when `variant="floating"`.
+   * @defaultValue "bottom"
+   */
+  side?: 'top' | 'bottom';
+
+  /**
+   * Horizontal alignment along the chosen side. Only applies when
+   * `variant="floating"`.
+   * @defaultValue "center"
+   */
+  align?: 'start' | 'center' | 'end';
+
   /**
    * The ARIA role of the container.
    * @defaultValue "toolbar"
@@ -13,6 +33,12 @@ export interface FloatingActionsProps {
 }
 
 export interface FloatingActionsSeparatorProps {
+  /**
+   * Color variant inherited from the underlying `Separator`.
+   * @defaultValue "primary"
+   */
+  color?: 'primary' | 'secondary' | 'tertiary';
+
   /** Additional CSS class names. */
   className?: string;
 }
diff --git a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
index 4eb3d3e74..e39c983f2 100644
--- a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
+++ b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
@@ -16,6 +16,31 @@ describe('FloatingActions', () => {
     expect(screen.getByText('content')).toBeInTheDocument();
   });
 
+  it('defaults to the floating variant anchored bottom-center', () => {
+    render(<FloatingActions>content</FloatingActions>);
+    const root = screen.getByRole('toolbar');
+    expect(root).toHaveAttribute('data-variant', 'floating');
+    expect(root).toHaveAttribute('data-side', 'bottom');
+    expect(root).toHaveAttribute('data-align', 'center');
+  });
+
+  it('renders the inline variant without floating positioning attributes', () => {
+    render(<FloatingActions variant='inline'>content</FloatingActions>);
+    const root = screen.getByRole('toolbar');
+    expect(root).toHaveAttribute('data-variant', 'inline');
+  });
+
+  it('reflects side and align on the root for floating variant', () => {
+    render(
+      <FloatingActions side='top' align='end'>
+        content
+      </FloatingActions>
+    );
+    const root = screen.getByRole('toolbar');
+    expect(root).toHaveAttribute('data-side', 'top');
+    expect(root).toHaveAttribute('data-align', 'end');
+  });
+
   it('applies custom className to the root', () => {
     render(<FloatingActions className='custom'>content</FloatingActions>);
     const root = screen.getByRole('toolbar');
diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
index 9a4c3495e..3976bed9d 100644
--- a/packages/raystack/components/floating-actions/floating-actions.module.css
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -10,6 +10,35 @@
   box-shadow: var(--rs-shadow-lifted);
 }
 
+/* ===== Floating variant ===== */
+.root[data-variant="floating"] {
+  position: fixed;
+  z-index: var(--rs-z-index-portal);
+}
+
+/* Vertical edge */
+.root[data-variant="floating"][data-side="bottom"] {
+  bottom: var(--rs-space-5);
+}
+
+.root[data-variant="floating"][data-side="top"] {
+  top: var(--rs-space-5);
+}
+
+/* Horizontal alignment */
+.root[data-variant="floating"][data-align="start"] {
+  left: var(--rs-space-5);
+}
+
+.root[data-variant="floating"][data-align="center"] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.root[data-variant="floating"][data-align="end"] {
+  right: var(--rs-space-5);
+}
+
 .separator[data-orientation="vertical"] {
   height: var(--rs-space-5);
 }
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
index a35796794..904194d18 100644
--- a/packages/raystack/components/floating-actions/floating-actions.tsx
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -5,14 +5,46 @@ import type { ComponentProps } from 'react';
 import { Separator } from '../separator';
 import styles from './floating-actions.module.css';
 
-export interface FloatingActionsProps extends ComponentProps<'div'> {}
+export type FloatingActionsVariant = 'inline' | 'floating';
+export type FloatingActionsSide = 'top' | 'bottom';
+export type FloatingActionsAlign = 'start' | 'center' | 'end';
+
+export interface FloatingActionsProps extends ComponentProps<'div'> {
+  /**
+   * Visual layout. `floating` pins the bar to the viewport via
+   * `position: fixed`; `inline` renders in normal document flow.
+   * @defaultValue "floating"
+   */
+  variant?: FloatingActionsVariant;
+  /**
+   * Vertical edge to anchor to. Only applies when `variant="floating"`.
+   * @defaultValue "bottom"
+   */
+  side?: FloatingActionsSide;
+  /**
+   * Horizontal alignment along the chosen side. Only applies when
+   * `variant="floating"`.
+   * @defaultValue "center"
+   */
+  align?: FloatingActionsAlign;
+}
 
 const FloatingActionsRoot = ({
   className,
   role = 'toolbar',
+  variant = 'floating',
+  side = 'bottom',
+  align = 'center',
   ...props
 }: FloatingActionsProps) => (
-  <div role={role} className={cx(styles.root, className)} {...props} />
+  <div
+    role={role}
+    data-variant={variant}
+    data-side={side}
+    data-align={align}
+    className={cx(styles.root, className)}
+    {...props}
+  />
 );
 FloatingActionsRoot.displayName = 'FloatingActions';
 

From cd9bba94796c40df7bd011208e07d9fe948675d6 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 09:37:11 +0530
Subject: [PATCH 09/18] refactor(floating-actions): address review feedback

- Replace hand-rolled <div role="toolbar"> with Base UI Toolbar primitive
  to inherit roving focus, arrow-key navigation, and disabled cascade.
- Expose FloatingActions.Group wrapping Toolbar.Group.
- Move Object.assign out of the 'use client' file into a non-client
  index.ts (matches Field/Sidebar precedent), avoiding client/server
  boundary issues. Rename index.tsx -> index.ts (no JSX).
- Trim Anatomy intro to the standard "Import and assemble the
  component:" line used by peer docs.
- Document Separator's size and render props, and the Toolbar
  primitive props (disabled, orientation, loopFocus) on Root.
- Add a scrolling-context demo using transform: translateZ(0) so the
  floating bar is scoped to the demo container instead of the page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/www/src/components/demo/demo.tsx         |  2 +
 .../playground/floating-actions-examples.tsx  | 28 +++++++
 .../docs/components/floating-actions/demo.ts  | 74 +++++++++++++++++++
 .../components/floating-actions/index.mdx     | 32 ++++++--
 .../docs/components/floating-actions/props.ts | 49 +++++++++++-
 .../__tests__/floating-actions.test.tsx       | 22 ++++--
 .../floating-actions.module.css               |  6 ++
 .../floating-actions/floating-actions.tsx     | 28 ++++---
 .../components/floating-actions/index.ts      | 19 +++++
 .../components/floating-actions/index.tsx     |  1 -
 10 files changed, 231 insertions(+), 30 deletions(-)
 create mode 100644 packages/raystack/components/floating-actions/index.ts
 delete mode 100644 packages/raystack/components/floating-actions/index.tsx

diff --git a/apps/www/src/components/demo/demo.tsx b/apps/www/src/components/demo/demo.tsx
index b59bbf2c0..f076d4847 100644
--- a/apps/www/src/components/demo/demo.tsx
+++ b/apps/www/src/components/demo/demo.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  CheckCircledIcon,
   FontBoldIcon,
   FontItalicIcon,
   InfoCircledIcon,
@@ -52,6 +53,7 @@ export default function Demo(props: DemoProps) {
       NextLink,
       PlusIcon,
       TransformIcon,
+      CheckCircledIcon,
       Pencil2Icon,
       InfoCircledIcon,
       UploadIcon,
diff --git a/apps/www/src/components/playground/floating-actions-examples.tsx b/apps/www/src/components/playground/floating-actions-examples.tsx
index 9b0f0edcc..8246b5cf9 100644
--- a/apps/www/src/components/playground/floating-actions-examples.tsx
+++ b/apps/www/src/components/playground/floating-actions-examples.tsx
@@ -52,6 +52,34 @@ export function FloatingActionsExamples() {
           </Button>
         </FloatingActions>
 
+        <Text>Inline — grouped actions:</Text>
+        <FloatingActions variant='inline' aria-label='Bulk actions'>
+          <Chip
+            variant='outline'
+            size='large'
+            color='accent'
+            leadingIcon={<CheckCircledIcon />}
+            isDismissible
+          >
+            3 selected
+          </Chip>
+          <FloatingActions.Separator />
+          <FloatingActions.Group>
+            <Button variant='outline' color='neutral' size='small'>
+              Archive
+            </Button>
+            <Button variant='outline' color='neutral' size='small'>
+              Move to
+            </Button>
+          </FloatingActions.Group>
+          <FloatingActions.Separator />
+          <FloatingActions.Group disabled>
+            <Button variant='outline' color='danger' size='small'>
+              Delete
+            </Button>
+          </FloatingActions.Group>
+        </FloatingActions>
+
         <Text>Floating (default) — pins to bottom-center of the viewport:</Text>
         <FloatingActions aria-label='Floating selection actions'>
           <Chip
diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index 8097629ac..e0a4705f6 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -64,3 +64,77 @@ export const iconOnlyDemo = {
   <IconButton aria-label="More info" variant="text" color="neutral" size="small"><InfoCircledIcon /></IconButton>
 </FloatingActions>`
 };
+
+export const scrollingDemo = {
+  type: 'code',
+  code: `
+  function ScrollingDemo() {
+    const rows = Array.from({ length: 20 }, (_, i) => i + 1);
+    return (
+      <div
+        style={{
+          position: 'relative',
+          height: '320px',
+          overflowY: 'auto',
+          transform: 'translateZ(0)',
+          border: '1px solid var(--rs-color-border-base-primary)',
+          borderRadius: 'var(--rs-radius-2)',
+          padding: 'var(--rs-space-5)'
+        }}
+      >
+        <Flex direction="column" gap="small">
+          {rows.map(row => (
+            <div
+              key={row}
+              style={{
+                padding: 'var(--rs-space-4)',
+                background: 'var(--rs-color-background-base-secondary)',
+                borderRadius: 'var(--rs-radius-1)'
+              }}
+            >
+              Row {row}
+            </div>
+          ))}
+        </Flex>
+        <FloatingActions aria-label="Selection actions">
+          <Chip
+            variant="outline"
+            size="large"
+            color="accent"
+            leadingIcon={<CheckCircledIcon />}
+            isDismissible
+          >
+            2 selected
+          </Chip>
+          <FloatingActions.Separator />
+          <Button variant="outline" color="neutral" size="small">Move to</Button>
+          <Button variant="outline" color="neutral" size="small">Actions</Button>
+        </FloatingActions>
+      </div>
+    );
+  }`
+};
+
+export const groupDemo = {
+  type: 'code',
+  code: `<FloatingActions variant="inline" aria-label="Bulk actions">
+  <Chip
+    variant="outline"
+    size="large"
+    color="accent"
+    leadingIcon={<CheckCircledIcon />}
+    isDismissible
+  >
+    3 selected
+  </Chip>
+  <FloatingActions.Separator />
+  <FloatingActions.Group>
+    <Button variant="outline" color="neutral" size="small">Archive</Button>
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+  </FloatingActions.Group>
+  <FloatingActions.Separator />
+  <FloatingActions.Group disabled>
+    <Button variant="outline" color="danger" size="small">Delete</Button>
+  </FloatingActions.Group>
+</FloatingActions>`
+};
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 3b98f88e0..4188f17b2 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -5,16 +5,16 @@ source: packages/raystack/components/floating-actions
 tag: new
 ---
 
-import { preview, floatingDemo, bulkActionsDemo, iconOnlyDemo } from "./demo.ts";
+import { preview, floatingDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
 ## Anatomy
 
-Import and assemble the component along with other primitives. `FloatingActions` provides the container (built on top of [`Separator`](/docs/components/separator) for the divider); everything inside is freely composable.
+Import and assemble the component:
 
 ```tsx
-import { FloatingActions, Chip, Button } from '@raystack/apsara'
+import { FloatingActions, Chip, Button } from "@raystack/apsara";
 
 <FloatingActions aria-label="Selection actions">
   <Chip isDismissible>2 selected</Chip>
@@ -26,15 +26,23 @@ import { FloatingActions, Chip, Button } from '@raystack/apsara'
 
 ## API Reference
 
+Built on top of Base UI's [Toolbar](https://base-ui.com/react/components/toolbar) primitive, so keyboard navigation, roving focus, and the `role="toolbar"` semantics come from the primitive.
+
 ### Root
 
-The container. Renders as a `role="toolbar"` element by default and pins itself to the viewport (`variant="floating"`).
+The container. Pins itself to the viewport by default (`variant="floating"`) and forwards the underlying Toolbar primitive props (`disabled`, `orientation`, `loopFocus`, plus all `<div>` attributes).
 
 <auto-type-table path="./props.ts" name="FloatingActionsProps" />
 
+### Group
+
+Cluster related items so that the toolbar treats them as a single navigation unit. Useful when you have a few destructive actions you want to disable together (`disabled` cascades to every focusable child).
+
+<auto-type-table path="./props.ts" name="FloatingActionsGroupProps" />
+
 ### Separator
 
-A vertical divider sized to the bar's content.
+A vertical divider sized to the bar's content. Built on top of [`Separator`](/docs/components/separator).
 
 <auto-type-table path="./props.ts" name="FloatingActionsSeparatorProps" />
 
@@ -66,8 +74,20 @@ Use `IconButton` inside the bar for compact toolbars.
 
 <Demo data={iconOnlyDemo} />
 
+### Grouped actions
+
+Use `FloatingActions.Group` to cluster related items so they navigate as one unit and can be disabled together.
+
+<Demo data={groupDemo} />
+
+### Scrolling context
+
+The floating variant stays pinned to the viewport (or the nearest containing block) while content scrolls beneath it — the canonical use case for a bulk-selection bar over a long list or table.
+
+<Demo data={scrollingDemo} />
+
 ## Accessibility
 
-- The root uses `role="toolbar"` so it is announced as a group of interactive controls. Override the `role` prop when a different grouping is more appropriate.
+- The root uses `role="toolbar"` (enforced by the Base UI Toolbar primitive) and is announced as a group of interactive controls. Keyboard focus moves between toolbar items with the arrow keys.
 - The separator renders with `role="separator"` and `aria-orientation="vertical"` via the Base UI primitive, communicating structural grouping between action clusters.
 - Provide an `aria-label` on the root when the toolbar's purpose is not obvious from its contents (e.g. `aria-label="Selection actions"`).
diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts
index 84a164408..599142f11 100644
--- a/apps/www/src/content/docs/components/floating-actions/props.ts
+++ b/apps/www/src/content/docs/components/floating-actions/props.ts
@@ -20,10 +20,25 @@ export interface FloatingActionsProps {
   align?: 'start' | 'center' | 'end';
 
   /**
-   * The ARIA role of the container.
-   * @defaultValue "toolbar"
+   * Disables every focusable item rendered inside the bar. Forwarded
+   * to the underlying Base UI Toolbar primitive.
+   * @defaultValue false
    */
-  role?: string;
+  disabled?: boolean;
+
+  /**
+   * Layout orientation of the toolbar. Forwarded to the underlying
+   * Base UI Toolbar primitive.
+   * @defaultValue "horizontal"
+   */
+  orientation?: 'horizontal' | 'vertical';
+
+  /**
+   * Whether keyboard navigation wraps focus when reaching either end
+   * of the bar. Forwarded to the underlying Base UI Toolbar primitive.
+   * @defaultValue true
+   */
+  loopFocus?: boolean;
 
   /** Additional CSS class names. */
   className?: string;
@@ -32,6 +47,20 @@ export interface FloatingActionsProps {
   children?: React.ReactNode;
 }
 
+export interface FloatingActionsGroupProps {
+  /**
+   * Disables every focusable item rendered inside the group.
+   * @defaultValue false
+   */
+  disabled?: boolean;
+
+  /** Additional CSS class names. */
+  className?: string;
+
+  /** The contents of the group. */
+  children?: React.ReactNode;
+}
+
 export interface FloatingActionsSeparatorProps {
   /**
    * Color variant inherited from the underlying `Separator`.
@@ -39,6 +68,20 @@ export interface FloatingActionsSeparatorProps {
    */
   color?: 'primary' | 'secondary' | 'tertiary';
 
+  /**
+   * Size variant inherited from the underlying `Separator`.
+   * @defaultValue "full"
+   */
+  size?: 'small' | 'half' | 'full';
+
   /** Additional CSS class names. */
   className?: string;
+
+  /**
+   * Render as a different element or component. Forwarded to Base UI's
+   * `Separator` primitive.
+   */
+  render?:
+    | React.ReactElement
+    | ((props: React.HTMLAttributes<HTMLDivElement>) => React.ReactNode);
 }
diff --git a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
index e39c983f2..ec2e14ceb 100644
--- a/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
+++ b/packages/raystack/components/floating-actions/__tests__/floating-actions.test.tsx
@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { describe, expect, it } from 'vitest';
-import { FloatingActions } from '../floating-actions';
 import styles from '../floating-actions.module.css';
+import { FloatingActions } from '../index';
 
 describe('FloatingActions', () => {
   it('renders with children and a toolbar role', () => {
@@ -55,13 +55,19 @@ describe('FloatingActions', () => {
     expect(ref.current).toBe(screen.getByRole('toolbar'));
   });
 
-  it('allows overriding the root role', () => {
-    render(
-      <FloatingActions role='group' aria-label='bulk'>
-        content
-      </FloatingActions>
-    );
-    expect(screen.getByRole('group', { name: 'bulk' })).toBeInTheDocument();
+  describe('Group', () => {
+    it('renders a Toolbar.Group inside the root', () => {
+      render(
+        <FloatingActions>
+          <FloatingActions.Group data-testid='group'>
+            <button type='button'>action</button>
+          </FloatingActions.Group>
+        </FloatingActions>
+      );
+      const group = screen.getByTestId('group');
+      expect(group).toBeInTheDocument();
+      expect(group.className).toContain(styles.group);
+    });
   });
 
   describe('Separator', () => {
diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
index 3976bed9d..3d39ad781 100644
--- a/packages/raystack/components/floating-actions/floating-actions.module.css
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -39,6 +39,12 @@
   right: var(--rs-space-5);
 }
 
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+}
+
 .separator[data-orientation="vertical"] {
   height: var(--rs-space-5);
 }
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
index 904194d18..afb770b88 100644
--- a/packages/raystack/components/floating-actions/floating-actions.tsx
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
 import { cx } from 'class-variance-authority';
-import type { ComponentProps } from 'react';
 import { Separator } from '../separator';
 import styles from './floating-actions.module.css';
 
@@ -9,7 +9,7 @@ export type FloatingActionsVariant = 'inline' | 'floating';
 export type FloatingActionsSide = 'top' | 'bottom';
 export type FloatingActionsAlign = 'start' | 'center' | 'end';
 
-export interface FloatingActionsProps extends ComponentProps<'div'> {
+export interface FloatingActionsProps extends ToolbarPrimitive.Root.Props {
   /**
    * Visual layout. `floating` pins the bar to the viewport via
    * `position: fixed`; `inline` renders in normal document flow.
@@ -29,16 +29,14 @@ export interface FloatingActionsProps extends ComponentProps<'div'> {
   align?: FloatingActionsAlign;
 }
 
-const FloatingActionsRoot = ({
+export const FloatingActionsRoot = ({
   className,
-  role = 'toolbar',
   variant = 'floating',
   side = 'bottom',
   align = 'center',
   ...props
 }: FloatingActionsProps) => (
-  <div
-    role={role}
+  <ToolbarPrimitive.Root
     data-variant={variant}
     data-side={side}
     data-align={align}
@@ -48,12 +46,22 @@ const FloatingActionsRoot = ({
 );
 FloatingActionsRoot.displayName = 'FloatingActions';
 
+export type FloatingActionsGroupProps = ToolbarPrimitive.Group.Props;
+
+export const FloatingActionsGroup = ({
+  className,
+  ...props
+}: FloatingActionsGroupProps) => (
+  <ToolbarPrimitive.Group className={cx(styles.group, className)} {...props} />
+);
+FloatingActionsGroup.displayName = 'FloatingActions.Group';
+
 export type FloatingActionsSeparatorProps = Omit<
-  ComponentProps<typeof Separator>,
+  React.ComponentProps<typeof Separator>,
   'orientation'
 >;
 
-const FloatingActionsSeparator = ({
+export const FloatingActionsSeparator = ({
   className,
   ...props
 }: FloatingActionsSeparatorProps) => (
@@ -64,7 +72,3 @@ const FloatingActionsSeparator = ({
   />
 );
 FloatingActionsSeparator.displayName = 'FloatingActions.Separator';
-
-export const FloatingActions = Object.assign(FloatingActionsRoot, {
-  Separator: FloatingActionsSeparator
-});
diff --git a/packages/raystack/components/floating-actions/index.ts b/packages/raystack/components/floating-actions/index.ts
new file mode 100644
index 000000000..9cfaf9af8
--- /dev/null
+++ b/packages/raystack/components/floating-actions/index.ts
@@ -0,0 +1,19 @@
+import {
+  FloatingActionsGroup,
+  FloatingActionsRoot,
+  FloatingActionsSeparator
+} from './floating-actions';
+
+export type {
+  FloatingActionsAlign,
+  FloatingActionsGroupProps,
+  FloatingActionsProps,
+  FloatingActionsSeparatorProps,
+  FloatingActionsSide,
+  FloatingActionsVariant
+} from './floating-actions';
+
+export const FloatingActions = Object.assign(FloatingActionsRoot, {
+  Group: FloatingActionsGroup,
+  Separator: FloatingActionsSeparator
+});
diff --git a/packages/raystack/components/floating-actions/index.tsx b/packages/raystack/components/floating-actions/index.tsx
deleted file mode 100644
index 044709911..000000000
--- a/packages/raystack/components/floating-actions/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { FloatingActions } from './floating-actions';

From 0e3eda4ed8fea2813185302267535394655240cd Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 09:52:54 +0530
Subject: [PATCH 10/18] docs(datatable): add row selection demo with
 FloatingActions overlay

---
 .../content/docs/components/datatable/demo.ts | 99 ++++++++++++++++++-
 .../docs/components/datatable/index.mdx       | 96 ------------------
 2 files changed, 98 insertions(+), 97 deletions(-)

diff --git a/apps/www/src/content/docs/components/datatable/demo.ts b/apps/www/src/content/docs/components/datatable/demo.ts
index 90dcecfd2..2f525596f 100644
--- a/apps/www/src/content/docs/components/datatable/demo.ts
+++ b/apps/www/src/content/docs/components/datatable/demo.ts
@@ -7,5 +7,102 @@ export const preview = {
 
 export const rowSelectionDemo = {
   type: 'code',
-  code: `<DataTableSelectionDemo />`
+  previewCode: false,
+  code: `<DataTableSelectionDemo />`,
+  codePreview: [
+    {
+      label: 'index.tsx',
+      code: `import {
+  Button,
+  Checkbox,
+  Chip,
+  DataTable,
+  FloatingActions,
+  useDataTable,
+} from "@raystack/apsara";
+import { TransformIcon } from "@radix-ui/react-icons";
+
+// 1. Leading checkbox column that wires TanStack selection.
+const selectionColumn = {
+  id: "select",
+  header: ({ table }) => (
+    <Checkbox
+      checked={
+        table.getIsAllRowsSelected()
+          ? true
+          : table.getIsSomeRowsSelected()
+          ? "indeterminate"
+          : false
+      }
+      onCheckedChange={(v) => table.toggleAllRowsSelected(Boolean(v))}
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={(v) => row.toggleSelected(Boolean(v))}
+      onClick={(e) => e.stopPropagation()}
+    />
+  ),
+  enableSorting: false,
+  enableColumnFilter: false,
+  enableHiding: false,
+};
+
+// 2. Render the overlay bar alongside DataTable, reading selection from context.
+function SelectionBar() {
+  const { table } = useDataTable();
+  const selected = table.getSelectedRowModel().rows;
+  if (selected.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        bottom: "var(--rs-space-9)",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 2,
+      }}
+    >
+      <FloatingActions aria-label="Selection actions">
+        <Chip
+          variant="outline"
+          size="large"
+          color="neutral"
+          leadingIcon={<TransformIcon />}
+          isDismissible
+          onDismiss={() => table.resetRowSelection()}
+        >
+          {selected.length} selected
+        </Chip>
+        <FloatingActions.Separator />
+        <Button variant="outline" color="neutral" size="small">
+          Move to
+        </Button>
+        <Button variant="outline" color="neutral" size="small">
+          Actions
+        </Button>
+      </FloatingActions>
+    </div>
+  );
+}
+
+// 3. Compose. The wrapping element must be \`position: relative\` so the
+// overlay anchors to the table region (not the viewport).
+<div style={{ position: "relative", flex: 1, minHeight: 0 }}>
+  <DataTable
+    data={rows}
+    columns={[selectionColumn, ...columns]}
+    mode="client"
+    defaultSort={{ name: "name", order: "asc" }}
+  >
+    <DataTable.Toolbar />
+    <DataTable.Search />
+    <DataTable.Content />
+    <SelectionBar />
+  </DataTable>
+</div>`
+    }
+  ]
 };
diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index ebe31f86d..ba1e46683 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -476,102 +476,6 @@ DataTable does not ship a built-in selection toolbar, but the underlying TanStac
 
 <Demo data={rowSelectionDemo} />
 
-Add a leading checkbox column to enable selection, then render a `FloatingActions` overlay driven by `table.getSelectedRowModel()`:
-
-```tsx
-import {
-  Button,
-  Checkbox,
-  Chip,
-  DataTable,
-  FloatingActions,
-  useDataTable,
-} from "@raystack/apsara";
-import { TransformIcon } from "@radix-ui/react-icons";
-
-// 1. Leading checkbox column that wires TanStack selection.
-const selectionColumn = {
-  id: "select",
-  header: ({ table }) => (
-    <Checkbox
-      checked={
-        table.getIsAllRowsSelected()
-          ? true
-          : table.getIsSomeRowsSelected()
-          ? "indeterminate"
-          : false
-      }
-      onCheckedChange={(v) => table.toggleAllRowsSelected(Boolean(v))}
-    />
-  ),
-  cell: ({ row }) => (
-    <Checkbox
-      checked={row.getIsSelected()}
-      onCheckedChange={(v) => row.toggleSelected(Boolean(v))}
-      onClick={(e) => e.stopPropagation()}
-    />
-  ),
-  enableSorting: false,
-  enableColumnFilter: false,
-  enableHiding: false,
-};
-
-// 2. Render the overlay bar alongside DataTable, reading selection from context.
-function SelectionBar() {
-  const { table } = useDataTable();
-  const selected = table.getSelectedRowModel().rows;
-  if (selected.length === 0) return null;
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        bottom: "var(--rs-space-9)",
-        left: "50%",
-        transform: "translateX(-50%)",
-        zIndex: 2,
-      }}
-    >
-      <FloatingActions aria-label="Selection actions">
-        <Chip
-          variant="outline"
-          size="large"
-          color="neutral"
-          leadingIcon={<TransformIcon />}
-          isDismissible
-          onDismiss={() => table.resetRowSelection()}
-        >
-          {selected.length} selected
-        </Chip>
-        <FloatingActions.Separator />
-        <Button variant="outline" color="neutral" size="small">
-          Move to
-        </Button>
-        <Button variant="outline" color="neutral" size="small">
-          Actions
-        </Button>
-      </FloatingActions>
-    </div>
-  );
-}
-
-// 3. Compose. The wrapping element must be `position: relative` so the
-// overlay anchors to the table region (not the viewport).
-<div style={{ position: "relative", flex: 1, minHeight: 0 }}>
-  <DataTable
-    data={rows}
-    columns={[selectionColumn, ...columns]}
-    mode="client"
-    defaultSort={{ name: "name", order: "asc" }}
-  >
-    <DataTable.Toolbar />
-    <DataTable.Search />
-    <DataTable.Content />
-    <SelectionBar />
-  </DataTable>
-</div>
-```
-
 Notes:
 - `table.resetRowSelection()` clears the selection; wire it to `Chip`'s `onDismiss`.
 - The overlay uses `position: absolute` on the parent wrapper, so the last row of data isn't hidden behind it — if your table is tall, add `padding-bottom` on `DataTable.Content`'s scroll container to match.

From 7a8d02fbb66653c2940b231a3b1c0f36c7d89ae9 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 09:55:50 +0530
Subject: [PATCH 11/18] docs(datatable): simplify SelectionBar implementation
 and update positioning notes

---
 .../components/datatable-selection-demo.tsx   | 53 ++++++-------
 .../content/docs/components/datatable/demo.ts | 79 ++++++++-----------
 .../docs/components/datatable/index.mdx       |  2 +-
 3 files changed, 57 insertions(+), 77 deletions(-)

diff --git a/apps/www/src/components/datatable-selection-demo.tsx b/apps/www/src/components/datatable-selection-demo.tsx
index feaaee60d..6583cfdb4 100644
--- a/apps/www/src/components/datatable-selection-demo.tsx
+++ b/apps/www/src/components/datatable-selection-demo.tsx
@@ -78,35 +78,25 @@ function SelectionBar() {
   if (selected.length === 0) return null;
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        bottom: 'var(--rs-space-9)',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: 2
-      }}
-    >
-      <FloatingActions aria-label='Selection actions'>
-        <Chip
-          variant='outline'
-          size='large'
-          color='neutral'
-          leadingIcon={<TransformIcon />}
-          isDismissible
-          onDismiss={() => table.resetRowSelection()}
-        >
-          {selected.length} selected
-        </Chip>
-        <FloatingActions.Separator />
-        <Button variant='outline' color='neutral' size='small'>
-          Move to
-        </Button>
-        <Button variant='outline' color='neutral' size='small'>
-          Actions
-        </Button>
-      </FloatingActions>
-    </div>
+    <FloatingActions aria-label='Selection actions'>
+      <Chip
+        variant='outline'
+        size='large'
+        color='neutral'
+        leadingIcon={<TransformIcon />}
+        isDismissible
+        onDismiss={() => table.resetRowSelection()}
+      >
+        {selected.length} selected
+      </Chip>
+      <FloatingActions.Separator />
+      <Button variant='outline' color='neutral' size='small'>
+        Move to
+      </Button>
+      <Button variant='outline' color='neutral' size='small'>
+        Actions
+      </Button>
+    </FloatingActions>
   );
 }
 
@@ -133,7 +123,8 @@ const DataTableSelectionDemo = () => {
         position: 'relative',
         height: 760,
         width: '100%',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        transform: 'translateZ(0)'
       }}
     >
       <DataTable
@@ -148,7 +139,7 @@ const DataTableSelectionDemo = () => {
         <InitialSelection />
         <SelectionBar />
       </DataTable>
-      <style>{`.dt-selection-demo-scroll { padding-bottom: 160px; }`}</style>
+      <style>{`.dt-selection-demo-scroll { padding-bottom: 80px; }`}</style>
     </div>
   );
 };
diff --git a/apps/www/src/content/docs/components/datatable/demo.ts b/apps/www/src/content/docs/components/datatable/demo.ts
index 2f525596f..768299c32 100644
--- a/apps/www/src/content/docs/components/datatable/demo.ts
+++ b/apps/www/src/content/docs/components/datatable/demo.ts
@@ -49,60 +49,49 @@ const selectionColumn = {
   enableHiding: false,
 };
 
-// 2. Render the overlay bar alongside DataTable, reading selection from context.
+// 2. Render the bar alongside DataTable, reading selection from context.
+//    FloatingActions defaults to variant="floating" (position: fixed,
+//    bottom-center), so no positioning CSS is needed here.
 function SelectionBar() {
   const { table } = useDataTable();
   const selected = table.getSelectedRowModel().rows;
   if (selected.length === 0) return null;
 
   return (
-    <div
-      style={{
-        position: "absolute",
-        bottom: "var(--rs-space-9)",
-        left: "50%",
-        transform: "translateX(-50%)",
-        zIndex: 2,
-      }}
-    >
-      <FloatingActions aria-label="Selection actions">
-        <Chip
-          variant="outline"
-          size="large"
-          color="neutral"
-          leadingIcon={<TransformIcon />}
-          isDismissible
-          onDismiss={() => table.resetRowSelection()}
-        >
-          {selected.length} selected
-        </Chip>
-        <FloatingActions.Separator />
-        <Button variant="outline" color="neutral" size="small">
-          Move to
-        </Button>
-        <Button variant="outline" color="neutral" size="small">
-          Actions
-        </Button>
-      </FloatingActions>
-    </div>
+    <FloatingActions aria-label="Selection actions">
+      <Chip
+        variant="outline"
+        size="large"
+        color="neutral"
+        leadingIcon={<TransformIcon />}
+        isDismissible
+        onDismiss={() => table.resetRowSelection()}
+      >
+        {selected.length} selected
+      </Chip>
+      <FloatingActions.Separator />
+      <Button variant="outline" color="neutral" size="small">
+        Move to
+      </Button>
+      <Button variant="outline" color="neutral" size="small">
+        Actions
+      </Button>
+    </FloatingActions>
   );
 }
 
-// 3. Compose. The wrapping element must be \`position: relative\` so the
-// overlay anchors to the table region (not the viewport).
-<div style={{ position: "relative", flex: 1, minHeight: 0 }}>
-  <DataTable
-    data={rows}
-    columns={[selectionColumn, ...columns]}
-    mode="client"
-    defaultSort={{ name: "name", order: "asc" }}
-  >
-    <DataTable.Toolbar />
-    <DataTable.Search />
-    <DataTable.Content />
-    <SelectionBar />
-  </DataTable>
-</div>`
+// 3. Compose.
+<DataTable
+  data={rows}
+  columns={[selectionColumn, ...columns]}
+  mode="client"
+  defaultSort={{ name: "name", order: "asc" }}
+>
+  <DataTable.Toolbar />
+  <DataTable.Search />
+  <DataTable.Content />
+  <SelectionBar />
+</DataTable>`
     }
   ]
 };
diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index ba1e46683..a478cc7a3 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -478,7 +478,7 @@ DataTable does not ship a built-in selection toolbar, but the underlying TanStac
 
 Notes:
 - `table.resetRowSelection()` clears the selection; wire it to `Chip`'s `onDismiss`.
-- The overlay uses `position: absolute` on the parent wrapper, so the last row of data isn't hidden behind it — if your table is tall, add `padding-bottom` on `DataTable.Content`'s scroll container to match.
+- `FloatingActions` defaults to `variant="floating"` (`position: fixed`, bottom-center), so no positioning CSS is needed at the call site. To scope the bar to the table region rather than the viewport, give an ancestor `transform`, `filter`, or `contain: paint` so it becomes the containing block for `position: fixed`. Add `padding-bottom` on `DataTable.Content`'s scroll container if rows would otherwise sit behind the bar.
 - When DataTable ships first-class row selection, this pattern will migrate to a selection-aware helper; the user-level API (the chip + buttons inside `FloatingActions`) stays the same.
 
 ## Accessibility

From b9ab6c4816676149c2cce6e243e7f9b71568d0be Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 12:10:46 +0530
Subject: [PATCH 12/18] docs(floating-actions): pad inline demos so the bar
 isn't flush with preview edges

Wrap each inline demo's bar in a div with paddingBlock so the rendered
preview shows visible breathing room above and below. Inline style keeps
the change scoped to floating-actions demos without leaking into other
component preview areas.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../docs/components/floating-actions/demo.ts  | 118 ++++++++++--------
 1 file changed, 63 insertions(+), 55 deletions(-)

diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index e0a4705f6..cb9df4ac6 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -2,20 +2,22 @@
 
 export const preview = {
   type: 'code',
-  code: `<FloatingActions variant="inline" aria-label="Selection actions">
-  <Chip
-    variant="outline"
-    size="large"
-    color="accent"
-    leadingIcon={<CheckCircledIcon />}
-    isDismissible
-  >
-    2 selected
-  </Chip>
-  <FloatingActions.Separator />
-  <Button variant="outline" color="neutral" size="small">Move to</Button>
-  <Button variant="outline" color="neutral" size="small">Actions</Button>
-</FloatingActions>`
+  code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
+  <FloatingActions variant="inline" aria-label="Selection actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      2 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="neutral" size="small">Actions</Button>
+  </FloatingActions>
+</div>`
 };
 
 export const floatingDemo = {
@@ -38,31 +40,35 @@ export const floatingDemo = {
 
 export const bulkActionsDemo = {
   type: 'code',
-  code: `<FloatingActions variant="inline" aria-label="Bulk actions">
-  <Chip
-    variant="outline"
-    size="large"
-    color="accent"
-    leadingIcon={<CheckCircledIcon />}
-    isDismissible
-  >
-    5 selected
-  </Chip>
-  <FloatingActions.Separator />
-  <Button variant="outline" color="neutral" size="small">Archive</Button>
-  <Button variant="outline" color="neutral" size="small">Move to</Button>
-  <Button variant="outline" color="danger" size="small">Delete</Button>
-</FloatingActions>`
+  code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
+  <FloatingActions variant="inline" aria-label="Bulk actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      5 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Archive</Button>
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="danger" size="small">Delete</Button>
+  </FloatingActions>
+</div>`
 };
 
 export const iconOnlyDemo = {
   type: 'code',
-  code: `<FloatingActions variant="inline" aria-label="Row actions">
-  <IconButton aria-label="Edit" variant="text" color="neutral" size="small"><Pencil2Icon /></IconButton>
-  <IconButton aria-label="Upload" variant="text" color="neutral" size="small"><UploadIcon /></IconButton>
-  <FloatingActions.Separator />
-  <IconButton aria-label="More info" variant="text" color="neutral" size="small"><InfoCircledIcon /></IconButton>
-</FloatingActions>`
+  code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
+  <FloatingActions variant="inline" aria-label="Row actions">
+    <IconButton aria-label="Edit" variant="text" color="neutral" size="small"><Pencil2Icon /></IconButton>
+    <IconButton aria-label="Upload" variant="text" color="neutral" size="small"><UploadIcon /></IconButton>
+    <FloatingActions.Separator />
+    <IconButton aria-label="More info" variant="text" color="neutral" size="small"><InfoCircledIcon /></IconButton>
+  </FloatingActions>
+</div>`
 };
 
 export const scrollingDemo = {
@@ -117,24 +123,26 @@ export const scrollingDemo = {
 
 export const groupDemo = {
   type: 'code',
-  code: `<FloatingActions variant="inline" aria-label="Bulk actions">
-  <Chip
-    variant="outline"
-    size="large"
-    color="accent"
-    leadingIcon={<CheckCircledIcon />}
-    isDismissible
-  >
-    3 selected
-  </Chip>
-  <FloatingActions.Separator />
-  <FloatingActions.Group>
-    <Button variant="outline" color="neutral" size="small">Archive</Button>
-    <Button variant="outline" color="neutral" size="small">Move to</Button>
-  </FloatingActions.Group>
-  <FloatingActions.Separator />
-  <FloatingActions.Group disabled>
-    <Button variant="outline" color="danger" size="small">Delete</Button>
-  </FloatingActions.Group>
-</FloatingActions>`
+  code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
+  <FloatingActions variant="inline" aria-label="Bulk actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      3 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <FloatingActions.Group>
+      <Button variant="outline" color="neutral" size="small">Archive</Button>
+      <Button variant="outline" color="neutral" size="small">Move to</Button>
+    </FloatingActions.Group>
+    <FloatingActions.Separator />
+    <FloatingActions.Group disabled>
+      <Button variant="outline" color="danger" size="small">Delete</Button>
+    </FloatingActions.Group>
+  </FloatingActions>
+</div>`
 };

From 861978c8d018776b1d3fbaabf54b62c6ae16480e Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 12:32:58 +0530
Subject: [PATCH 13/18] docs(floating-actions): tab the variants demo and clean
 up scrolling-context demo

- Collapse the separate ### Floating and ### Inline subsections into a
  single ## Variants section with a tabbed demo (matches the sidebar/
  navbar/tabs pattern).
- Floating tab is scoped to a 200px transform: translateZ(0) container
  so the bar pins to that area instead of the docs page.
- Scrolling-context demo: replace 20 dummy rows with a single dashed-
  border placeholder (sidebar precedent), make the scroll wrapper full
  width, drop the inner padding/border so rows go edge to edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../docs/components/floating-actions/demo.ts  | 92 ++++++++++++-------
 .../components/floating-actions/index.mdx     | 14 +--
 2 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index cb9df4ac6..1cb5315ca 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -20,22 +20,55 @@ export const preview = {
 </div>`
 };
 
-export const floatingDemo = {
+export const variantsDemo = {
   type: 'code',
-  code: `<FloatingActions side="bottom" align="center" aria-label="Selection actions">
-  <Chip
-    variant="outline"
-    size="large"
-    color="accent"
-    leadingIcon={<CheckCircledIcon />}
-    isDismissible
-  >
-    2 selected
-  </Chip>
-  <FloatingActions.Separator />
-  <Button variant="outline" color="neutral" size="small">Move to</Button>
-  <Button variant="outline" color="neutral" size="small">Actions</Button>
-</FloatingActions>`
+  tabs: [
+    {
+      name: 'Floating',
+      code: `<div
+  style={{
+    position: 'relative',
+    width: '100%',
+    height: 200,
+    transform: 'translateZ(0)'
+  }}
+>
+  <FloatingActions aria-label="Selection actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      2 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="neutral" size="small">Actions</Button>
+  </FloatingActions>
+</div>`
+    },
+    {
+      name: 'Inline',
+      code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
+  <FloatingActions variant="inline" aria-label="Selection actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      2 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="neutral" size="small">Actions</Button>
+  </FloatingActions>
+</div>`
+    }
+  ]
 };
 
 export const bulkActionsDemo = {
@@ -75,33 +108,24 @@ export const scrollingDemo = {
   type: 'code',
   code: `
   function ScrollingDemo() {
-    const rows = Array.from({ length: 20 }, (_, i) => i + 1);
     return (
       <div
         style={{
           position: 'relative',
+          width: '100%',
           height: '320px',
           overflowY: 'auto',
-          transform: 'translateZ(0)',
-          border: '1px solid var(--rs-color-border-base-primary)',
-          borderRadius: 'var(--rs-radius-2)',
-          padding: 'var(--rs-space-5)'
+          transform: 'translateZ(0)'
         }}
       >
-        <Flex direction="column" gap="small">
-          {rows.map(row => (
-            <div
-              key={row}
-              style={{
-                padding: 'var(--rs-space-4)',
-                background: 'var(--rs-color-background-base-secondary)',
-                borderRadius: 'var(--rs-radius-1)'
-              }}
-            >
-              Row {row}
-            </div>
-          ))}
-        </Flex>
+        <div
+          style={{
+            height: '800px',
+            border: '2px dashed var(--rs-color-border-base-secondary)',
+            margin: 'var(--rs-space-4)',
+            boxSizing: 'border-box'
+          }}
+        />
         <FloatingActions aria-label="Selection actions">
           <Chip
             variant="outline"
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 3d9458481..76e2cbaf2 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -5,7 +5,7 @@ source: packages/raystack/components/floating-actions
 tag: new
 ---
 
-import { preview, floatingDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
+import { preview, variantsDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
@@ -48,17 +48,9 @@ A vertical divider sized to the bar's content. Built on top of [`Separator`](/do
 
 ## Variants
 
-### Floating
+`floating` (default) renders with `position: fixed` anchored to the viewport via `side` and `align` — use it when the bar should follow the user as the page scrolls (bulk-selection toolbars, contextual action trays). `inline` opts out of viewport positioning so the bar flows with surrounding content.
 
-The default. Renders with `position: fixed` and is anchored to the viewport via `side` and `align`. Use this when the bar should follow the user as the page scrolls (bulk-selection toolbars, contextual action trays).
-
-<Demo data={floatingDemo} />
-
-### Inline
-
-Opt out of viewport positioning when you want the bar to flow with surrounding content (e.g. inside a card, table cell, or storybook frame).
-
-<Demo data={preview} />
+<Demo data={variantsDemo} />
 
 ## Examples
 

From cd26ef8d3a1ca4cf5a22283e2ae189f2a6fd6007 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 12:56:15 +0530
Subject: [PATCH 14/18] docs(floating-actions): add side, align, and disabled
 demos to documentation

---
 .../docs/components/floating-actions/demo.ts  | 107 ++++++++++++++++--
 .../components/floating-actions/index.mdx     |  20 +++-
 2 files changed, 115 insertions(+), 12 deletions(-)

diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index 1cb5315ca..d3eea2a21 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -29,10 +29,20 @@ export const variantsDemo = {
   style={{
     position: 'relative',
     width: '100%',
-    height: 200,
+    alignSelf: 'stretch',
     transform: 'translateZ(0)'
   }}
 >
+  <div style={{ height: '100%', overflowY: 'auto' }}>
+    <div
+      style={{
+        height: 500,
+        border: '2px dashed var(--rs-color-border-base-secondary)',
+        margin: 'var(--rs-space-4)',
+        boxSizing: 'border-box'
+      }}
+    />
+  </div>
   <FloatingActions aria-label="Selection actions">
     <Chip
       variant="outline"
@@ -95,7 +105,11 @@ export const bulkActionsDemo = {
 export const iconOnlyDemo = {
   type: 'code',
   code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
-  <FloatingActions variant="inline" aria-label="Row actions">
+  <FloatingActions
+    variant="inline"
+    aria-label="Row actions"
+    style={{ gap: 'var(--rs-space-5)' }}
+  >
     <IconButton aria-label="Edit" variant="text" color="neutral" size="small"><Pencil2Icon /></IconButton>
     <IconButton aria-label="Upload" variant="text" color="neutral" size="small"><UploadIcon /></IconButton>
     <FloatingActions.Separator />
@@ -114,18 +128,19 @@ export const scrollingDemo = {
           position: 'relative',
           width: '100%',
           height: '320px',
-          overflowY: 'auto',
           transform: 'translateZ(0)'
         }}
       >
-        <div
-          style={{
-            height: '800px',
-            border: '2px dashed var(--rs-color-border-base-secondary)',
-            margin: 'var(--rs-space-4)',
-            boxSizing: 'border-box'
-          }}
-        />
+        <div style={{ height: '100%', overflowY: 'auto' }}>
+          <div
+            style={{
+              height: '800px',
+              border: '2px dashed var(--rs-color-border-base-secondary)',
+              margin: 'var(--rs-space-4)',
+              boxSizing: 'border-box'
+            }}
+          />
+        </div>
         <FloatingActions aria-label="Selection actions">
           <Chip
             variant="outline"
@@ -145,6 +160,76 @@ export const scrollingDemo = {
   }`
 };
 
+const placementWrapper = (props: string) =>
+  `<div
+  style={{
+    position: 'relative',
+    width: '100%',
+    height: 240,
+    transform: 'translateZ(0)'
+  }}
+>
+  <div
+    style={{
+      position: 'absolute',
+      inset: '0 var(--rs-space-4)',
+      border: '2px dashed var(--rs-color-border-base-secondary)',
+      boxSizing: 'border-box'
+    }}
+  />
+  <FloatingActions ${props} aria-label="Selection actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      2 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="neutral" size="small">Actions</Button>
+  </FloatingActions>
+</div>`;
+
+export const sideDemo = {
+  type: 'code',
+  tabs: [
+    { name: 'Bottom', code: placementWrapper('side="bottom"') },
+    { name: 'Top', code: placementWrapper('side="top"') }
+  ]
+};
+
+export const alignDemo = {
+  type: 'code',
+  tabs: [
+    { name: 'Start', code: placementWrapper('align="start"') },
+    { name: 'Center', code: placementWrapper('align="center"') },
+    { name: 'End', code: placementWrapper('align="end"') }
+  ]
+};
+
+export const disabledDemo = {
+  type: 'code',
+  code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
+  <FloatingActions disabled variant="inline" aria-label="Selection actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      2 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="neutral" size="small">Actions</Button>
+  </FloatingActions>
+</div>`
+};
+
 export const groupDemo = {
   type: 'code',
   code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 76e2cbaf2..8afec6ccb 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -5,7 +5,7 @@ source: packages/raystack/components/floating-actions
 tag: new
 ---
 
-import { preview, variantsDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
+import { preview, variantsDemo, sideDemo, alignDemo, disabledDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
@@ -66,6 +66,24 @@ Use `IconButton` inside the bar for compact toolbars.
 
 <Demo data={iconOnlyDemo} />
 
+### Side
+
+`side` controls which vertical edge of the viewport the bar pins to.
+
+<Demo data={sideDemo} />
+
+### Align
+
+`align` controls the horizontal alignment of the bar along the chosen `side`.
+
+<Demo data={alignDemo} />
+
+### Disabled
+
+`disabled` on the root cascades to every focusable item registered with the underlying Toolbar primitive, so the whole bar can be greyed out in one place (e.g. while a bulk action is pending).
+
+<Demo data={disabledDemo} />
+
 ### Grouped actions
 
 Use `FloatingActions.Group` to cluster related items so they navigate as one unit and can be disabled together.

From f915dfff1bee622d7b3abe548b03533fe1c2d5fd Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 13:00:52 +0530
Subject: [PATCH 15/18] docs(floating-actions): update alignment and remove
 disabled demo from documentation

---
 .../docs/components/floating-actions/demo.ts  | 23 ++-----------------
 .../components/floating-actions/index.mdx     |  8 +------
 2 files changed, 3 insertions(+), 28 deletions(-)

diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index d3eea2a21..f9a270f81 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -165,7 +165,8 @@ const placementWrapper = (props: string) =>
   style={{
     position: 'relative',
     width: '100%',
-    height: 240,
+    alignSelf: 'stretch',
+    minHeight: 240,
     transform: 'translateZ(0)'
   }}
 >
@@ -210,26 +211,6 @@ export const alignDemo = {
   ]
 };
 
-export const disabledDemo = {
-  type: 'code',
-  code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
-  <FloatingActions disabled variant="inline" aria-label="Selection actions">
-    <Chip
-      variant="outline"
-      size="large"
-      color="accent"
-      leadingIcon={<CheckCircledIcon />}
-      isDismissible
-    >
-      2 selected
-    </Chip>
-    <FloatingActions.Separator />
-    <Button variant="outline" color="neutral" size="small">Move to</Button>
-    <Button variant="outline" color="neutral" size="small">Actions</Button>
-  </FloatingActions>
-</div>`
-};
-
 export const groupDemo = {
   type: 'code',
   code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 8afec6ccb..06c8503f0 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -5,7 +5,7 @@ source: packages/raystack/components/floating-actions
 tag: new
 ---
 
-import { preview, variantsDemo, sideDemo, alignDemo, disabledDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
+import { preview, variantsDemo, sideDemo, alignDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
@@ -78,12 +78,6 @@ Use `IconButton` inside the bar for compact toolbars.
 
 <Demo data={alignDemo} />
 
-### Disabled
-
-`disabled` on the root cascades to every focusable item registered with the underlying Toolbar primitive, so the whole bar can be greyed out in one place (e.g. while a bulk action is pending).
-
-<Demo data={disabledDemo} />
-
 ### Grouped actions
 
 Use `FloatingActions.Group` to cluster related items so they navigate as one unit and can be disabled together.

From a5d1afaab288a718344bcbfe6870b13f3dafdc3a Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 13:10:52 +0530
Subject: [PATCH 16/18] refactor(floating-actions): drop unreliable disabled
 prop from public API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FloatingActions accepts arbitrary children (Apsara Button, IconButton,
Chip, custom components) rather than wrapping them via a registered
Toolbar.Button-style subcomponent, so the Toolbar primitive's disabled
cascade only affected items that happened to register with the
primitive — not the typical children. Documenting it as "cascades to
every focusable item" was misleading.

Omit disabled from both FloatingActionsProps and
FloatingActionsGroupProps. Consumers can disable individual items
explicitly when needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../playground/floating-actions-examples.tsx        |  2 +-
 .../docs/components/floating-actions/demo.ts        |  2 +-
 .../docs/components/floating-actions/index.mdx      |  6 +++---
 .../docs/components/floating-actions/props.ts       | 13 -------------
 .../floating-actions/floating-actions.tsx           |  8 ++++++--
 5 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/apps/www/src/components/playground/floating-actions-examples.tsx b/apps/www/src/components/playground/floating-actions-examples.tsx
index 8246b5cf9..e965df88f 100644
--- a/apps/www/src/components/playground/floating-actions-examples.tsx
+++ b/apps/www/src/components/playground/floating-actions-examples.tsx
@@ -73,7 +73,7 @@ export function FloatingActionsExamples() {
             </Button>
           </FloatingActions.Group>
           <FloatingActions.Separator />
-          <FloatingActions.Group disabled>
+          <FloatingActions.Group>
             <Button variant='outline' color='danger' size='small'>
               Delete
             </Button>
diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index cb9df4ac6..32c94e90c 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -140,7 +140,7 @@ export const groupDemo = {
       <Button variant="outline" color="neutral" size="small">Move to</Button>
     </FloatingActions.Group>
     <FloatingActions.Separator />
-    <FloatingActions.Group disabled>
+    <FloatingActions.Group>
       <Button variant="outline" color="danger" size="small">Delete</Button>
     </FloatingActions.Group>
   </FloatingActions>
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 4188f17b2..1336e55ec 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -30,13 +30,13 @@ Built on top of Base UI's [Toolbar](https://base-ui.com/react/components/toolbar
 
 ### Root
 
-The container. Pins itself to the viewport by default (`variant="floating"`) and forwards the underlying Toolbar primitive props (`disabled`, `orientation`, `loopFocus`, plus all `<div>` attributes).
+The container. Pins itself to the viewport by default (`variant="floating"`) and forwards the underlying Toolbar primitive props (`orientation`, `loopFocus`, plus all `<div>` attributes).
 
 <auto-type-table path="./props.ts" name="FloatingActionsProps" />
 
 ### Group
 
-Cluster related items so that the toolbar treats them as a single navigation unit. Useful when you have a few destructive actions you want to disable together (`disabled` cascades to every focusable child).
+Cluster related items so that the toolbar treats them as a single navigation unit. Useful when you want a destructive cluster (e.g. "Delete") to read as one section, separated from the rest of the bar by a `Separator`.
 
 <auto-type-table path="./props.ts" name="FloatingActionsGroupProps" />
 
@@ -76,7 +76,7 @@ Use `IconButton` inside the bar for compact toolbars.
 
 ### Grouped actions
 
-Use `FloatingActions.Group` to cluster related items so they navigate as one unit and can be disabled together.
+Use `FloatingActions.Group` to cluster related items so they navigate as one unit, separated from the rest of the bar by a `Separator`.
 
 <Demo data={groupDemo} />
 
diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts
index 599142f11..f7d30831e 100644
--- a/apps/www/src/content/docs/components/floating-actions/props.ts
+++ b/apps/www/src/content/docs/components/floating-actions/props.ts
@@ -19,13 +19,6 @@ export interface FloatingActionsProps {
    */
   align?: 'start' | 'center' | 'end';
 
-  /**
-   * Disables every focusable item rendered inside the bar. Forwarded
-   * to the underlying Base UI Toolbar primitive.
-   * @defaultValue false
-   */
-  disabled?: boolean;
-
   /**
    * Layout orientation of the toolbar. Forwarded to the underlying
    * Base UI Toolbar primitive.
@@ -48,12 +41,6 @@ export interface FloatingActionsProps {
 }
 
 export interface FloatingActionsGroupProps {
-  /**
-   * Disables every focusable item rendered inside the group.
-   * @defaultValue false
-   */
-  disabled?: boolean;
-
   /** Additional CSS class names. */
   className?: string;
 
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
index afb770b88..fa3806a26 100644
--- a/packages/raystack/components/floating-actions/floating-actions.tsx
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -9,7 +9,8 @@ export type FloatingActionsVariant = 'inline' | 'floating';
 export type FloatingActionsSide = 'top' | 'bottom';
 export type FloatingActionsAlign = 'start' | 'center' | 'end';
 
-export interface FloatingActionsProps extends ToolbarPrimitive.Root.Props {
+export interface FloatingActionsProps
+  extends Omit<ToolbarPrimitive.Root.Props, 'disabled'> {
   /**
    * Visual layout. `floating` pins the bar to the viewport via
    * `position: fixed`; `inline` renders in normal document flow.
@@ -46,7 +47,10 @@ export const FloatingActionsRoot = ({
 );
 FloatingActionsRoot.displayName = 'FloatingActions';
 
-export type FloatingActionsGroupProps = ToolbarPrimitive.Group.Props;
+export type FloatingActionsGroupProps = Omit<
+  ToolbarPrimitive.Group.Props,
+  'disabled'
+>;
 
 export const FloatingActionsGroup = ({
   className,

From 2eeee2968978226ce33a4330ecbb112797895406 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 13:18:18 +0530
Subject: [PATCH 17/18] docs(floating-actions, datatable): update links to
 ensure correct navigation in documentation

---
 apps/www/src/content/docs/components/datatable/index.mdx        | 2 +-
 apps/www/src/content/docs/components/floating-actions/index.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index a478cc7a3..0a5040fce 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -472,7 +472,7 @@ import { OrganizationIcon, FilterIcon } from "@raystack/apsara/icons";
 
 ### Row selection
 
-DataTable does not ship a built-in selection toolbar, but the underlying TanStack table instance is exposed via `useDataTable()`, so you can wire row selection yourself and float an [`FloatingActions`](./floating-actions) bar over the table when rows are selected.
+DataTable does not ship a built-in selection toolbar, but the underlying TanStack table instance is exposed via `useDataTable()`, so you can wire row selection yourself and float an [`FloatingActions`](/docs/components/floating-actions) bar over the table when rows are selected.
 
 <Demo data={rowSelectionDemo} />
 
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 5a5c2e504..225daa00d 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -92,7 +92,7 @@ The floating variant stays pinned to the viewport (or the nearest containing blo
 
 ### Use with DataTable
 
-For the row-selection pattern — rendering this bar over a `DataTable` and wiring it to selected rows — see [DataTable → Row selection](../datatable#row-selection).
+For the row-selection pattern — rendering this bar over a `DataTable` and wiring it to selected rows — see [DataTable → Row selection](/docs/components/datatable#row-selection).
 
 ## Accessibility
 

From 8c57a4fbae4cf9e2c148cc0b9f412af48da0efaa Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 27 Apr 2026 13:38:31 +0530
Subject: [PATCH 18/18] feat(floating-actions): add inline demo and update
 props interface

---
 .../docs/components/floating-actions/demo.ts  | 27 +++++++++++++++++++
 .../components/floating-actions/index.mdx     |  6 ++---
 .../docs/components/floating-actions/props.ts | 14 ----------
 .../floating-actions/floating-actions.tsx     |  5 +++-
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index 32c94e90c..23ef0b0a8 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -1,6 +1,33 @@
 'use client';
 
 export const preview = {
+  type: 'code',
+  code: `<div
+  style={{
+    position: 'relative',
+    width: '100%',
+    height: 240,
+    transform: 'translateZ(0)'
+  }}
+>
+  <FloatingActions aria-label="Selection actions">
+    <Chip
+      variant="outline"
+      size="large"
+      color="accent"
+      leadingIcon={<CheckCircledIcon />}
+      isDismissible
+    >
+      2 selected
+    </Chip>
+    <FloatingActions.Separator />
+    <Button variant="outline" color="neutral" size="small">Move to</Button>
+    <Button variant="outline" color="neutral" size="small">Actions</Button>
+  </FloatingActions>
+</div>`
+};
+
+export const inlineDemo = {
   type: 'code',
   code: `<div style={{ paddingBlock: 'var(--rs-space-9)' }}>
   <FloatingActions variant="inline" aria-label="Selection actions">
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index 1336e55ec..4b9d7daf8 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -5,7 +5,7 @@ source: packages/raystack/components/floating-actions
 tag: new
 ---
 
-import { preview, floatingDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
+import { preview, floatingDemo, inlineDemo, bulkActionsDemo, iconOnlyDemo, groupDemo, scrollingDemo } from "./demo.ts";
 
 <Demo data={preview} />
 
@@ -30,7 +30,7 @@ Built on top of Base UI's [Toolbar](https://base-ui.com/react/components/toolbar
 
 ### Root
 
-The container. Pins itself to the viewport by default (`variant="floating"`) and forwards the underlying Toolbar primitive props (`orientation`, `loopFocus`, plus all `<div>` attributes).
+The container. Pins itself to the viewport by default (`variant="floating"`) and forwards all `<div>` attributes to the underlying Toolbar primitive.
 
 <auto-type-table path="./props.ts" name="FloatingActionsProps" />
 
@@ -58,7 +58,7 @@ The default. Renders with `position: fixed` and is anchored to the viewport via
 
 Opt out of viewport positioning when you want the bar to flow with surrounding content (e.g. inside a card, table cell, or storybook frame).
 
-<Demo data={preview} />
+<Demo data={inlineDemo} />
 
 ## Examples
 
diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts
index f7d30831e..630583412 100644
--- a/apps/www/src/content/docs/components/floating-actions/props.ts
+++ b/apps/www/src/content/docs/components/floating-actions/props.ts
@@ -19,20 +19,6 @@ export interface FloatingActionsProps {
    */
   align?: 'start' | 'center' | 'end';
 
-  /**
-   * Layout orientation of the toolbar. Forwarded to the underlying
-   * Base UI Toolbar primitive.
-   * @defaultValue "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-
-  /**
-   * Whether keyboard navigation wraps focus when reaching either end
-   * of the bar. Forwarded to the underlying Base UI Toolbar primitive.
-   * @defaultValue true
-   */
-  loopFocus?: boolean;
-
   /** Additional CSS class names. */
   className?: string;
 
diff --git a/packages/raystack/components/floating-actions/floating-actions.tsx b/packages/raystack/components/floating-actions/floating-actions.tsx
index fa3806a26..11aae21fb 100644
--- a/packages/raystack/components/floating-actions/floating-actions.tsx
+++ b/packages/raystack/components/floating-actions/floating-actions.tsx
@@ -10,7 +10,10 @@ export type FloatingActionsSide = 'top' | 'bottom';
 export type FloatingActionsAlign = 'start' | 'center' | 'end';
 
 export interface FloatingActionsProps
-  extends Omit<ToolbarPrimitive.Root.Props, 'disabled'> {
+  extends Omit<
+    ToolbarPrimitive.Root.Props,
+    'disabled' | 'orientation' | 'loopFocus'
+  > {
   /**
    * Visual layout. `floating` pins the bar to the viewport via
    * `position: fixed`; `inline` renders in normal document flow.