@astryxdesign/cli 0.1.2-canary.bfcbf64 → 0.1.2-canary.c11faf5

package/templates/blocks/components/Blockquote/BlockquoteTestimonials.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Blockquote} from '@astryxdesign/core/Blockquote';
+import {Grid, GridSpan} from '@astryxdesign/core/Grid';
+import {Card} from '@astryxdesign/core/Card';
+
+export default function BlockquoteTestimonials() {
+  return (
+    <Grid columns={2} gap={3} style={{maxWidth: 600}}>
+      <Card padding={4}>
+        <Blockquote cite="Sarah K., Lead Engineer">
+          Shipping UI has never been this fast. Our team went from design to
+          production in a single afternoon.
+        </Blockquote>
+      </Card>
+      <Card padding={4}>
+        <Blockquote cite="Marcus T., Product Designer">
+          The token system means every new screen just looks right — no manual
+          color or spacing decisions.
+        </Blockquote>
+      </Card>
+      <GridSpan columns={2}>
+        <Card padding={4}>
+          <Blockquote cite="Priya L., Engineering Manager">
+            Onboarding a new engineer used to take a week of design review. Now
+            they're shipping accessible, polished components on day one.
+          </Blockquote>
+        </Card>
+      </GridSpan>
+    </Grid>
+  );
+}

package/templates/blocks/components/Blockquote/BlockquoteWithCite.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Blockquote',
+  name: 'Blockquote — With Attribution',
+  displayName: 'Blockquote — With Attribution',
+  description:
+    'A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Blockquote', 'Layout'],
+};

package/templates/blocks/components/Blockquote/BlockquoteWithCite.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Blockquote} from '@astryxdesign/core/Blockquote';
+import {VStack} from '@astryxdesign/core/Layout';
+
+export default function BlockquoteWithCite() {
+  return (
+    <VStack gap={4} style={{maxWidth: 500}}>
+      <Blockquote>
+        Design is not just what it looks like and feels like. Design is how it
+        works.
+      </Blockquote>
+      <Blockquote cite="Steve Jobs">
+        The people who are crazy enough to think they can change the world are
+        the ones who do.
+      </Blockquote>
+    </VStack>
+  );
+}

package/templates/blocks/components/BreadcrumbItem/BreadcrumbItemBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BreadcrumbItem',
+  name: 'BreadcrumbItem — Basic',
+  displayName: 'BreadcrumbItem — Basic',
+  description:
+    'Breadcrumb links inside a Breadcrumbs trail. Ancestor pages get an href; mark the last item with isCurrent to render it as plain text for the current page.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Breadcrumbs', 'BreadcrumbItem'],
+};

package/templates/blocks/components/BreadcrumbItem/BreadcrumbItemBasic.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Breadcrumbs, BreadcrumbItem} from '@astryxdesign/core/Breadcrumbs';
+
+export default function BreadcrumbItemBasic() {
+  return (
+    <Breadcrumbs>
+      <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
+      <BreadcrumbItem isCurrent>Profile</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}

package/templates/blocks/components/ButtonGroup/ButtonGroupBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ButtonGroup',
+  name: 'ButtonGroup — Basic',
+  displayName: 'ButtonGroup — Basic',
+  description:
+    'Three related actions joined into a single connected control. Provide a group label for accessibility and keep all buttons the same variant so they read as one unit.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ButtonGroup', 'Button'],
+};

package/templates/blocks/components/ButtonGroup/ButtonGroupBasic.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ButtonGroup} from '@astryxdesign/core/ButtonGroup';
+import {Button} from '@astryxdesign/core/Button';
+
+export default function ButtonGroupBasic() {
+  return (
+    <ButtonGroup label="Text editing actions">
+      <Button label="Copy" />
+      <Button label="Cut" />
+      <Button label="Paste" />
+    </ButtonGroup>
+  );
+}

package/templates/blocks/components/ChatDictationButton/ChatDictationButtonBasic.doc.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ChatDictationButton',
+  name: 'ChatDictationButton — Basic',
+  displayName: 'ChatDictationButton — Basic',
+  description:
+    'A dictation button wired to useChatDictation and placed in the sendActions slot of a ChatComposer. Click the microphone to transcribe speech into the input.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'Chat',
+    'ChatDictationButton',
+    'ChatComposer',
+    'ChatComposerInput',
+  ],
+};

package/templates/blocks/components/ChatDictationButton/ChatDictationButtonBasic.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useRef} from 'react';
+import {
+  ChatDictationButton,
+  ChatComposer,
+  ChatComposerInput,
+  useChatDictation,
+} from '@astryxdesign/core/Chat';
+import type {ChatComposerInputHandle} from '@astryxdesign/core/Chat';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function ChatDictationButtonBasic() {
+  const inputRef = useRef<ChatComposerInputHandle>(null);
+
+  const dictation = useChatDictation({
+    inputRef,
+    onResult: text => {
+      console.log('Dictation result:', text);
+    },
+  });
+
+  return (
+    <Stack direction="vertical" width="100%" style={{maxWidth: 450}}>
+      <ChatComposer
+        onSubmit={value => console.log('Submit:', value)}
+        input={<ChatComposerInput handleRef={inputRef} />}
+        sendActions={<ChatDictationButton dictation={dictation} />}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/CheckboxListItem/CheckboxListItemBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CheckboxListItem',
+  name: 'CheckboxListItem — Basic',
+  displayName: 'CheckboxListItem — Basic',
+  description:
+    'Checkbox items with labels and descriptions inside a controlled CheckboxList. Use for multi-select option groups like notification preferences.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CheckboxList', 'CheckboxListItem'],
+};

package/templates/blocks/components/CheckboxListItem/CheckboxListItemBasic.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList';
+
+export default function CheckboxListItemBasic() {
+  const [value, setValue] = useState<string[]>(['updates']);
+
+  return (
+    <CheckboxList label="Email preferences" value={value} onChange={setValue}>
+      <CheckboxListItem
+        label="Product updates"
+        value="updates"
+        description="New features and improvements"
+      />
+      <CheckboxListItem
+        label="Security alerts"
+        value="security"
+        description="Important account security notifications"
+      />
+      <CheckboxListItem
+        label="Marketing"
+        value="marketing"
+        description="Tips, offers, and promotions"
+      />
+    </CheckboxList>
+  );
+}

package/templates/blocks/components/CollapsibleGroup/CollapsibleGroupAccordion.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CollapsibleGroup',
+  name: 'CollapsibleGroup — Accordion',
+  displayName: 'CollapsibleGroup — Accordion',
+  description:
+    'An accordion built with type="single": opening one Collapsible automatically closes the others. Use defaultValue to pre-expand the most important section.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CollapsibleGroup', 'Collapsible', 'VStack', 'Text'],
+};

package/templates/blocks/components/CollapsibleGroup/CollapsibleGroupAccordion.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CollapsibleGroupAccordion() {
+  return (
+    <CollapsibleGroup type="single" defaultValue="account">
+      <VStack gap={2} width="100%">
+        <Collapsible trigger="Account" value="account">
+          <Text type="body" color="secondary">
+            Manage your profile details, email address, and password.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="Notifications" value="notifications">
+          <Text type="body" color="secondary">
+            Choose which activity triggers email and push notifications.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="Billing" value="billing">
+          <Text type="body" color="secondary">
+            View invoices and update your payment method.
+          </Text>
+        </Collapsible>
+      </VStack>
+    </CollapsibleGroup>
+  );
+}

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteEmpty',
+  name: 'CommandPaletteEmpty — Basic',
+  displayName: 'CommandPaletteEmpty — Basic',
+  description:
+    'A command palette with no results, showing a custom empty message via emptyBootstrapText. Use to explain why the palette is empty and what the user can do next.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CommandPalette', 'CommandPaletteEmpty', 'Text'],
+};

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyBasic.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {Text} from '@astryxdesign/core/Text';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteEmptyBasic() {
+  const emptySource = useMemo(() => createStaticSource([]), []);
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={emptySource}
+      emptyBootstrapText={
+        <Text type="supporting" color="secondary">
+          No commands available
+        </Text>
+      }
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteFooter/CommandPaletteFooterBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteFooter',
+  name: 'CommandPaletteFooter — Basic',
+  displayName: 'CommandPaletteFooter — Basic',
+  description:
+    'A command palette footer with no children, rendering the built-in keyboard navigation hints. Use CommandPaletteFooter without content to get the default arrow-key, Enter, and Esc hints below the results list.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CommandPalette', 'CommandPaletteFooter'],
+};

package/templates/blocks/components/CommandPaletteFooter/CommandPaletteFooterBasic.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {
+  CommandPalette,
+  CommandPaletteFooter,
+} from '@astryxdesign/core/CommandPalette';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteFooterBasic() {
+  const source = useMemo(
+    () =>
+      createStaticSource([
+        {id: 'new-file', label: 'New File'},
+        {id: 'open-recent', label: 'Open Recent'},
+        {id: 'save-all', label: 'Save All'},
+      ]),
+    [],
+  );
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      footer={<CommandPaletteFooter />}
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupBasic.doc.mjs

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteGroup',
+  name: 'CommandPaletteGroup — Basic',
+  displayName: 'CommandPaletteGroup — Basic',
+  description:
+    'Command palette items organized under group headings using the composed CommandPaletteGroup form. Use to separate related commands into labeled sections.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'CommandPaletteGroup',
+    'CommandPaletteItem',
+    'CommandPaletteList',
+  ],
+};

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupBasic.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteGroupBasic() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteGroup heading="Navigation">
+        <CommandPaletteItem value="home" onSelect={() => {}}>
+          Go to Home
+        </CommandPaletteItem>
+        <CommandPaletteItem value="dashboard" onSelect={() => {}}>
+          Go to Dashboard
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+      <CommandPaletteGroup heading="Actions">
+        <CommandPaletteItem value="new-file" onSelect={() => {}}>
+          New File
+        </CommandPaletteItem>
+        <CommandPaletteItem value="save-all" onSelect={() => {}}>
+          Save All
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteItem',
+  name: 'CommandPaletteItem — Basic',
+  displayName: 'CommandPaletteItem — Basic',
+  description:
+    'Selectable command palette items inside a CommandPaletteList, including highlighted and disabled states. Use when composing a palette manually instead of a search source.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CommandPaletteItem', 'CommandPaletteList'],
+};

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemBasic.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteItemBasic() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteItem value="new-file" onSelect={() => {}}>
+        New File
+      </CommandPaletteItem>
+      <CommandPaletteItem value="open-recent" isHighlighted onSelect={() => {}}>
+        Open Recent
+      </CommandPaletteItem>
+      <CommandPaletteItem value="save-all" onSelect={() => {}}>
+        Save All
+      </CommandPaletteItem>
+      <CommandPaletteItem value="publish" isDisabled>
+        Publish (disabled)
+      </CommandPaletteItem>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/ContextMenu/ContextMenuBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ContextMenu',
+  name: 'ContextMenu — Basic',
+  displayName: 'ContextMenu — Basic',
+  description:
+    'A right-click area with action items and a divider separating a destructive action. Use to provide contextual actions for a specific element or region.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ContextMenu'],
+};

package/templates/blocks/components/ContextMenu/ContextMenuBasic.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ContextMenu} from '@astryxdesign/core/ContextMenu';
+
+export default function ContextMenuBasic() {
+  return (
+    <ContextMenu
+      items={[
+        {label: 'Cut', onClick: () => {}},
+        {label: 'Copy', onClick: () => {}},
+        {label: 'Paste', onClick: () => {}},
+        {type: 'divider'},
+        {label: 'Delete', onClick: () => {}},
+      ]}>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: '#d1d5db',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: '#6b7280',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
+    </ContextMenu>
+  );
+}

package/templates/blocks/components/DialogHeader/DialogHeaderBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DialogHeader',
+  name: 'DialogHeader — Basic',
+  displayName: 'DialogHeader — Basic',
+  description:
+    'A DialogHeader with a title, subtitle, and close button, placed in the header slot of a Dialog Layout. Pass onOpenChange to render the close button.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Dialog', 'DialogHeader', 'Layout', 'LayoutContent', 'Text'],
+};

package/templates/blocks/components/DialogHeader/DialogHeaderBasic.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function DialogHeaderBasic() {
+  return (
+    <Dialog isOpen isInline onOpenChange={() => {}}>
+      <Layout
+        header={
+          <DialogHeader
+            title="Invite teammates"
+            subtitle="Send invitations to join your workspace"
+            onOpenChange={() => {}}
+          />
+        }
+        content={
+          <LayoutContent>
+            <Text type="body" color="secondary">
+              Dialog body content goes here.
+            </Text>
+          </LayoutContent>
+        }
+      />
+    </Dialog>
+  );
+}

package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx

@@ -2,17 +2,11 @@
 
 'use client';
 
-import {useState} from 'react';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 
 export default function DropdownMenuShowcase() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
   return (
     <DropdownMenu
-      isMenuOpen={isMenuOpen}
-      onOpenChange={setIsMenuOpen}
-      hasAutoFocus={false}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DropdownMenuItem',
+  name: 'DropdownMenuItem — Basic',
+  displayName: 'DropdownMenuItem — Basic',
+  description:
+    'Dropdown menu items with labels and secondary descriptions. Use DropdownMenuItem to render custom menu entries with consistent styling.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['DropdownMenu', 'DropdownMenuItem'],
+};

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemBasic.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {DropdownMenu, DropdownMenuItem} from '@astryxdesign/core/DropdownMenu';
+
+export default function DropdownMenuItemBasic() {
+  return (
+    <DropdownMenu button={{label: 'Actions'}}>
+      <DropdownMenuItem
+        label="Edit"
+        description="Modify this item"
+        onClick={() => {}}
+      />
+      <DropdownMenuItem
+        label="Duplicate"
+        description="Create a copy"
+        onClick={() => {}}
+      />
+      <DropdownMenuItem
+        label="Delete"
+        description="This action cannot be undone"
+        onClick={() => {}}
+      />
+    </DropdownMenu>
+  );
+}

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx

@@ -65,11 +65,7 @@ const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
 
 export default function DropdownMenuItemShowcase() {
   return (
-    <DropdownMenu
-      button={{label: 'Actions'}}
-      isMenuOpen
-      hasAutoFocus={false}
-      onOpenChange={() => {}}>
+    <DropdownMenu button={{label: 'Actions'}}>
       <DropdownMenuItem
         icon={PencilIcon}
         label="Edit"