@astryxdesign/cli 0.6.3 → 0.6.4-canary.10dd683

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaOverscrollChaining.tsx

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {
+  borderVars,
+  colorVars,
+  radiusVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  // A hairline frame so the nested viewport's edge — the edge the gesture
+  // meets — is visible.
+  sectionFrame: {
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-element'],
+  },
+});
+
+const SHARED = [
+  {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+  {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+  {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+  {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+  {id: 'tax', title: 'Tax region notes', meta: 'Hugo Bernard'},
+  {id: 'sso', title: 'SSO rollout plan', meta: 'Sofia Marchetti'},
+];
+
+const ARCHIVED = [
+  {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+  {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+  {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+  {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+  {id: 'survey', title: 'Q4 survey results', meta: 'Archived in January'},
+  {id: 'offsite', title: 'Offsite agenda', meta: 'Archived last year'},
+];
+
+function FileGrid({
+  files,
+}: {
+  files: Array<{id: string; title: string; meta: string}>;
+}) {
+  return (
+    <Grid columns={2} gap={2}>
+      {files.map(file => (
+        <Card key={file.id} variant="muted" padding={3}>
+          <VStack gap={1}>
+            <Text weight="medium" maxLines={1}>
+              {file.title}
+            </Text>
+            <Text type="supporting" maxLines={1}>
+              {file.meta}
+            </Text>
+          </VStack>
+        </Card>
+      ))}
+    </Grid>
+  );
+}
+
+export default function ScrollableAreaOverscrollChaining() {
+  return (
+    <Card width={400} padding={0}>
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={4}>
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace files</Heading>
+            <Text type="supporting">Two sections, two edge policies</Text>
+          </VStack>
+
+          <VStack gap={2}>
+            <Text type="label" color="secondary">
+              Shared with you
+            </Text>
+            {/* Default overscroll="allow": a gesture that reaches this
+                section's end carries on scrolling the panel behind it. */}
+            <ScrollableArea
+              axis="block"
+              label="Shared with you"
+              height={150}
+              padding={2}
+              xstyle={styles.sectionFrame}>
+              <FileGrid files={SHARED} />
+            </ScrollableArea>
+            <Text type="supporting">
+              Scroll past the end and the panel keeps going.
+            </Text>
+          </VStack>
+
+          <VStack gap={2}>
+            <Text type="label" color="secondary">
+              Archived
+            </Text>
+            {/* overscroll="contain" stops the gesture at this section's
+                edge, so the panel behind it stays put. */}
+            <ScrollableArea
+              axis="block"
+              label="Archived"
+              overscroll="contain"
+              height={150}
+              padding={2}
+              xstyle={styles.sectionFrame}>
+              <FileGrid files={ARCHIVED} />
+            </ScrollableArea>
+            <Text type="supporting">
+              Scroll past the end and the panel stays where it is.
+            </Text>
+          </VStack>
+        </VStack>
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea',
+  displayName: 'Scrollable Area',
+  description:
+    'A fixed-height file panel that scrolls on the block axis; the heading sits inside the viewport, so it scrolls away with the content.',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaShowcase.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+const SECTIONS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaShowcase() {
+  return (
+    <Card width={380} padding={0}>
+      {/* The heading sits inside the viewport, so it scrolls away with the
+          content instead of staying pinned above it. */}
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={4}>
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace files</Heading>
+            <Text type="supporting">12 files across 3 sections</Text>
+          </VStack>
+          {SECTIONS.map(section => (
+            <VStack key={section.label} gap={2}>
+              <Text type="label" color="secondary">
+                {section.label}
+              </Text>
+              <Grid columns={2} gap={2}>
+                {section.files.map(file => (
+                  <Card key={file.id} variant="muted" padding={3}>
+                    <VStack gap={1}>
+                      <Text weight="medium" maxLines={1}>
+                        {file.title}
+                      </Text>
+                      <Text type="supporting" maxLines={1}>
+                        {file.meta}
+                      </Text>
+                    </VStack>
+                  </Card>
+                ))}
+              </Grid>
+            </VStack>
+          ))}
+        </VStack>
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyGroupHeaders.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Sticky Section Labels',
+  displayName: 'Scrollable Area — Sticky Section Labels',
+  description:
+    'A scrollable viewport is the containing block for position: sticky, so section labels pin to the top edge of the list instead of the page.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyGroupHeaders.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  sectionLabel: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+    backgroundColor: colorVars['--color-background-card'],
+    paddingBlock: spacingVars['--spacing-2'],
+  },
+});
+
+const SECTIONS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaStickyGroupHeaders() {
+  return (
+    <Card width={380} padding={0}>
+      {/* The viewport is the containing block for position: sticky. The panel
+          heading is ordinary content and scrolls away; the section labels
+          below it pin to the top of the list, not the page. */}
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={0.5} paddingBlockEnd={2}>
+          <Heading level={3}>Workspace files</Heading>
+          <Text type="supporting">12 files across 3 sections</Text>
+        </VStack>
+        {SECTIONS.map(section => (
+          <section key={section.label}>
+            <div {...stylex.props(styles.sectionLabel)}>
+              <Text type="label" color="secondary">
+                {section.label}
+              </Text>
+            </div>
+            <Grid columns={2} gap={2}>
+              {section.files.map(file => (
+                <Card key={file.id} variant="muted" padding={3}>
+                  <VStack gap={1}>
+                    <Text weight="medium" maxLines={1}>
+                      {file.title}
+                    </Text>
+                    <Text type="supporting" maxLines={1}>
+                      {file.meta}
+                    </Text>
+                  </VStack>
+                </Card>
+              ))}
+            </Grid>
+          </section>
+        ))}
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyPassthrough.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Sticky Passthrough',
+  displayName: 'Scrollable Area — Sticky Passthrough',
+  description:
+    'A section whose content fits clips instead of scrolling, so its sticky label passes outward and pins to the panel edge. The next section sets stickyContainment="always" and keeps its label in its own box.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyPassthrough.tsx

@@ -0,0 +1,122 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  sectionLabel: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+    backgroundColor: colorVars['--color-background-card'],
+    paddingBlock: spacingVars['--spacing-2'],
+  },
+});
+
+const SHARED = [
+  {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+  {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+  {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+  {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+  {id: 'tax', title: 'Tax region notes', meta: 'Hugo Bernard'},
+  {id: 'sso', title: 'SSO rollout plan', meta: 'Sofia Marchetti'},
+];
+
+const TEMPLATES = [
+  {id: 'weekly', title: 'Weekly report', meta: 'Used 24 times'},
+  {id: 'checklist', title: 'Launch checklist', meta: 'Used 18 times'},
+  {id: 'review', title: 'Design review', meta: 'Used 11 times'},
+  {id: 'retro', title: 'Retro board', meta: 'Used 9 times'},
+  {id: 'brief', title: 'Project brief', meta: 'Used 7 times'},
+  {id: 'postmortem', title: 'Postmortem', meta: 'Used 4 times'},
+];
+
+const ARCHIVED = [
+  {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+  {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+  {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+  {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+  {id: 'survey', title: 'Q4 survey results', meta: 'Archived in January'},
+  {id: 'offsite', title: 'Offsite agenda', meta: 'Archived last year'},
+];
+
+function FileGrid({
+  files,
+}: {
+  files: Array<{id: string; title: string; meta: string}>;
+}) {
+  return (
+    <Grid columns={2} gap={2}>
+      {files.map(file => (
+        <Card key={file.id} variant="muted" padding={3}>
+          <VStack gap={1}>
+            <Text weight="medium" maxLines={1}>
+              {file.title}
+            </Text>
+            <Text type="supporting" maxLines={1}>
+              {file.meta}
+            </Text>
+          </VStack>
+        </Card>
+      ))}
+    </Grid>
+  );
+}
+
+export default function ScrollableAreaStickyPassthrough() {
+  return (
+    <Card width={400} padding={0}>
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={0.5} paddingBlockEnd={2}>
+          <Heading level={3}>Workspace files</Heading>
+          <Text type="supporting">18 files across 3 sections</Text>
+        </VStack>
+
+        {/* This section's content fits, so its viewport clips instead of
+            scrolling and never becomes the Sticky boundary: the label
+            passes outward and pins to the panel's edge. */}
+        <ScrollableArea axis="block" label="Shared with you">
+          <div {...stylex.props(styles.sectionLabel)}>
+            <Text type="label" color="secondary">
+              Shared with you
+            </Text>
+          </div>
+          <FileGrid files={SHARED} />
+        </ScrollableArea>
+
+        {/* Same fitting content, but containment is explicit: this viewport
+            stays the Sticky boundary, so its label leaves with the box. */}
+        <ScrollableArea
+          axis="block"
+          label="Templates"
+          stickyContainment="always">
+          <div {...stylex.props(styles.sectionLabel)}>
+            <Text type="label" color="secondary">
+              Templates
+            </Text>
+          </div>
+          <FileGrid files={TEMPLATES} />
+        </ScrollableArea>
+
+        <div {...stylex.props(styles.sectionLabel)}>
+          <Text type="label" color="secondary">
+            Archived
+          </Text>
+        </div>
+        <FileGrid files={ARCHIVED} />
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaTwoAxisBoard.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Two-Axis Board',
+  displayName: 'Scrollable Area — Two-Axis Board',
+  description:
+    'axis="both" gives the content box max-content inline sizing, so a board wider and taller than its panel scrolls on both axes from one viewport.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaTwoAxisBoard.tsx

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+const COLUMNS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Templates',
+    files: [
+      {id: 'weekly', title: 'Weekly report', meta: 'Used 24 times'},
+      {id: 'checklist', title: 'Launch checklist', meta: 'Used 18 times'},
+      {id: 'review', title: 'Design review', meta: 'Used 11 times'},
+      {id: 'retro', title: 'Retro board', meta: 'Used 9 times'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaTwoAxisBoard() {
+  return (
+    <Card width={420} padding={0}>
+      {/* axis="both" gives the content box max-content inline sizing, so the
+          board is free to be wider than the viewport on both axes. The
+          heading is inside that box and travels with it. */}
+      <ScrollableArea
+        axis="both"
+        role="region"
+        label="Workspace board"
+        height={300}
+        padding={4}>
+        <VStack gap={4}>
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace board</Heading>
+            <Text type="supporting">16 files across 4 sections</Text>
+          </VStack>
+          <HStack gap={3} vAlign="start">
+            {COLUMNS.map(column => (
+              <VStack key={column.label} gap={2} width={180}>
+                <Text type="label" color="secondary">
+                  {column.label}
+                </Text>
+                {column.files.map(file => (
+                  <Card key={file.id} variant="muted" padding={3}>
+                    <VStack gap={1}>
+                      <Text weight="medium" maxLines={1}>
+                        {file.title}
+                      </Text>
+                      <Text type="supporting" maxLines={1}>
+                        {file.meta}
+                      </Text>
+                    </VStack>
+                  </Card>
+                ))}
+              </VStack>
+            ))}
+          </HStack>
+        </VStack>
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/Table/TableBulkActionsTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableSelection',
+  name: 'Table: Bulk Actions',
+  displayName: 'Table: Bulk Actions',
+  description:
+    'Controlled row selection with the reusable TableSelectionToolbar rendered in flow above the table. Product actions occupy the logical start; synchronized selection count and complete clear action occupy the logical end.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table', 'TableSelectionToolbar', 'Button'],
+};

package/assets/templates/blocks/components/Table/TableBulkActionsTable.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Button} from '@astryxdesign/core/Button';
+import {
+  Table,
+  TableSelectionToolbar,
+  useTableSelection,
+  useTableSelectionState,
+  proportional,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const users: User[] = [
+  {id: '1', name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
+  {id: '2', name: 'Bob', email: 'bob@example.com', role: 'Designer'},
+  {id: '3', name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
+  {id: '4', name: 'Diana', email: 'diana@example.com', role: 'Engineer'},
+  {id: '5', name: 'Eve', email: 'eve@example.com', role: 'Admin'},
+];
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name', width: proportional(1)},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role', width: proportional(1)},
+];
+
+export default function TableBulkActionsTable() {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const {selectionConfig, selectionState} = useTableSelectionState<User>({
+    data: users,
+    idKey: 'id',
+    selectedKeys,
+    setSelectedKeys,
+  });
+  const selectionPlugin = useTableSelection<User>(selectionConfig);
+
+  return (
+    <div>
+      <TableSelectionToolbar
+        selection={selectionState}
+        startContent={
+          <>
+            <Button label="Export" variant="ghost" onClick={() => {}} />
+            <Button
+              label="Delete"
+              variant="ghost"
+              onClick={selectionState.clearSelection}
+            />
+          </>
+        }
+      />
+      <Table
+        data={users}
+        columns={columns}
+        idKey="id"
+        plugins={{selection: selectionPlugin}}
+      />
+    </div>
+  );
+}