@duro-app/ui 0.50.0 → 0.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.50.0"
+    "@duro-app/tokens": "^0.51.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/ActionBar.meta.ts

@@ -6,9 +6,10 @@ export const meta: ComponentMeta = {
   whenToUse: [
     'Bulk actions on table selections (delete, revoke, export)',
     'Multi-select workflows where actions apply to all selected items',
+    'Selection-scoped verbs on a canvas/editor surface (set `bottomOffset` to clear any bottom chrome such as zoom controls)',
   ],
   whenNotToUse: [
-    'Single-item actions — use inline buttons or a Menu',
+    'Single-item actions that have an inline home — use inline buttons or a Menu',
     'Persistent toolbars — use Inline with buttons',
   ],
   relatedTo: [

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -11,6 +11,7 @@ interface ActionBarStoryArgs {
   onClearSelection: () => void
   selectedItemCount?: number
   isEmphasized?: boolean
+  bottomOffset?: number
 }
 
 const meta: Meta<ActionBarStoryArgs> = {
@@ -24,6 +25,11 @@ const meta: Meta<ActionBarStoryArgs> = {
       control: 'boolean',
       description: 'Whether the action bar uses the emphasized (inverse) style',
     },
+    bottomOffset: {
+      control: 'number',
+      description:
+        'Distance in px from the bottom of the viewport, for hosts whose bottom edge already carries chrome the bar must clear',
+    },
   },
 }
 
@@ -263,6 +269,35 @@ export const Hidden: Story = {
   render: () => <SelectableTable initialSelected={new Set()} />,
 }
 
+export const BottomOffset: Story = {
+  render: () => (
+    <>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Hero section</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+      <ActionBar selectedItemCount={1} bottomOffset={72} onClearSelection={() => {}}>
+        <Button variant="secondary" size="small">
+          Resize
+        </Button>
+      </ActionBar>
+    </>
+  ),
+  play: async () => {
+    const toolbar = document.querySelector('[role="toolbar"]')
+    await expect(toolbar).toBeInTheDocument()
+    await expect(getComputedStyle(toolbar as Element).bottom).toBe('72px')
+  },
+}
+
 export const AllVariants: Story = {
   render: () => (
     <html.div style={storyStyles.wrapper}>

package/src/components/ActionBar/ActionBar.tsx

@@ -14,6 +14,12 @@ export interface ActionBarProps {
   onClearSelection: () => void
   /** Whether the bar can be dismissed. When false, the close button is hidden. @default true */
   dismissible?: boolean
+  /**
+   * Distance in px between the bar and the bottom of the viewport, for hosts
+   * with their own bottom chrome (zoom controls, players) the bar must clear.
+   * Defaults to the spacing.lg token.
+   */
+  bottomOffset?: number
   /** Action buttons to display. */
   children: ReactNode
 }
@@ -24,6 +30,7 @@ function ActionBarContent({
   isEmphasized = false,
   onClearSelection,
   dismissible = true,
+  bottomOffset,
   children,
 }: ActionBarProps) {
   const countStr = selectedItemCount === 'all' ? 'All' : `${selectedItemCount}`
@@ -33,7 +40,11 @@ function ActionBarContent({
     <html.div
       role="toolbar"
       aria-label={label}
-      style={[styles.overlay, isEmphasized && styles.overlayEmphasized]}
+      style={[
+        styles.overlay,
+        bottomOffset != null && styles.overlayOffset(bottomOffset),
+        isEmphasized && styles.overlayEmphasized,
+      ]}
     >
       <html.span style={[styles.selectedCount, isEmphasized && styles.selectedCountEmphasized]}>
         {label}

package/src/components/ActionBar/styles.css.ts

@@ -28,6 +28,9 @@ export const styles = css.create({
     zIndex: 50,
     maxWidth: 'calc(100vw - 48px)',
   },
+  overlayOffset: (bottom: number) => ({
+    bottom,
+  }),
   overlayEmphasized: {
     backgroundColor: colors.accent,
     borderColor: colors.accent,