@fragments-sdk/ui 0.8.6 → 0.8.7

package/src/components/Menu/Menu.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Menu } from '.';
 import { Button } from '../Button';
 
@@ -8,10 +8,10 @@ export default defineFragment({
 
   meta: {
     name: 'Menu',
-    description: 'Dropdown menu for actions and commands. Use for contextual actions, overflow menus, or grouped commands.',
+    description: 'Dropdown menu for actions and commands. Supports submenus, check items, radio groups, and keyboard shortcuts.',
     category: 'feedback',
     status: 'stable',
-    tags: ['menu', 'dropdown', 'actions', 'context-menu', 'commands'],
+    tags: ['menu', 'dropdown', 'actions', 'context-menu', 'commands', 'submenu'],
     since: '0.1.0',
   },
 
@@ -21,6 +21,7 @@ export default defineFragment({
       'Context menus (right-click)',
       'User account menus',
       'Grouped actions with separators',
+      'Nested menus with submenus',
     ],
     whenNot: [
       'Selecting from options (use Select)',
@@ -33,12 +34,15 @@ export default defineFragment({
       'Include keyboard shortcuts where applicable',
       'Use danger variant for destructive actions',
       'Keep menu items under 10-12 for usability',
+      'Use checked prop on Menu.Item for simple selection state',
+      'Use Menu.Submenu for nested secondary options',
     ],
     accessibility: [
       'Full keyboard navigation with arrow keys',
       'Type-ahead search for items',
       'Focus returns to trigger on close',
       'Proper ARIA menu roles',
+      'ArrowRight opens submenus, ArrowLeft closes them',
     ],
   },
 
@@ -79,6 +83,7 @@ export default defineFragment({
       'onOpenChange: (open) => void - state handler',
       'Menu.Item danger: boolean - destructive styling',
       'Menu.Item shortcut: string - keyboard shortcut text',
+      'Menu.Item checked: boolean - check indicator for selection state',
     ],
     scenarioTags: [
       'action.menu',
@@ -90,7 +95,7 @@ export default defineFragment({
 
   ai: {
     compositionPattern: 'compound',
-    subComponents: ['Trigger', 'Content', 'Item', 'CheckboxItem', 'RadioGroup', 'RadioItem', 'Group', 'GroupLabel', 'Separator'],
+    subComponents: ['Trigger', 'Content', 'Item', 'CheckboxItem', 'RadioGroup', 'RadioItem', 'Group', 'GroupLabel', 'Separator', 'Submenu', 'SubmenuTrigger'],
     requiredChildren: ['Trigger', 'Content'],
     commonPatterns: [
       '<Menu><Menu.Trigger asChild><Button>Actions</Button></Menu.Trigger><Menu.Content><Menu.Item>{action1}</Menu.Item><Menu.Separator /><Menu.Item danger>{delete}</Menu.Item></Menu.Content></Menu>',
@@ -159,7 +164,7 @@ export default defineFragment({
     },
     {
       name: 'With Checkboxes',
-      description: 'Menu with toggleable options',
+      description: 'Menu with toggleable checkbox options',
       render: () => (
         <Menu>
           <Menu.Trigger asChild>
@@ -173,5 +178,50 @@ export default defineFragment({
         </Menu>
       ),
     },
+    {
+      name: 'With Checked Items',
+      description: 'Filter menu with check marks indicating active selections',
+      render: () => {
+        const [view, setView] = React.useState('grid');
+        return (
+          <Menu>
+            <Menu.Trigger asChild>
+              <Button variant="secondary">View</Button>
+            </Menu.Trigger>
+            <Menu.Content>
+              <Menu.Item checked={view === 'grid'} onSelect={() => setView('grid')}>Grid</Menu.Item>
+              <Menu.Item checked={view === 'list'} onSelect={() => setView('list')}>List</Menu.Item>
+              <Menu.Item checked={view === 'board'} onSelect={() => setView('board')}>Board</Menu.Item>
+            </Menu.Content>
+          </Menu>
+        );
+      },
+    },
+    {
+      name: 'With Submenu',
+      description: 'Menu with nested submenu for grouped secondary options',
+      render: () => (
+        <Menu>
+          <Menu.Trigger asChild>
+            <Button variant="secondary">File</Button>
+          </Menu.Trigger>
+          <Menu.Content>
+            <Menu.Item onSelect={() => {}}>New File</Menu.Item>
+            <Menu.Item onSelect={() => {}}>Open</Menu.Item>
+            <Menu.Separator />
+            <Menu.Submenu>
+              <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>
+              <Menu.Content side="right" align="start">
+                <Menu.Item onSelect={() => {}}>PNG</Menu.Item>
+                <Menu.Item onSelect={() => {}}>SVG</Menu.Item>
+                <Menu.Item onSelect={() => {}}>PDF</Menu.Item>
+              </Menu.Content>
+            </Menu.Submenu>
+            <Menu.Separator />
+            <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      ),
+    },
   ],
 });

package/src/components/Menu/Menu.module.scss

@@ -101,13 +101,30 @@
   margin-left: auto;
 }
 
-// Checkbox/Radio indicator
-.itemIndicator {
+// Check indicator (checkmark icon for checked items)
+.checkIndicator {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1rem;
   height: 1rem;
+  flex-shrink: 0;
+  color: var(--fui-color-accent, $fui-color-accent);
+}
+
+// Checkbox item
+.checkboxItem {
+  // Uses .checkIndicator for checked state visual
+}
+
+// Radio indicator (still uses icon)
+.radioIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  visibility: hidden;
 
   svg {
     width: 0.75rem;
@@ -115,16 +132,10 @@
   }
 }
 
-// Checkbox item states
-.checkboxItem {
-  &[data-checked] .itemIndicator {
-    color: var(--fui-color-accent, $fui-color-accent);
-  }
-}
-
 // Radio item states
 .radioItem {
-  &[data-checked] .itemIndicator {
+  &[data-checked] .radioIndicator {
+    visibility: visible;
     color: var(--fui-color-accent, $fui-color-accent);
   }
 }

package/src/components/Menu/Menu.test.tsx

@@ -73,23 +73,30 @@ describe('Menu', () => {
     });
   });
 
-  it('renders checkbox items', async () => {
+  it('renders checkbox items with check icon', async () => {
     const onCheckedChange = vi.fn();
-    const user = userEvent.setup();
     render(
       <Menu defaultOpen>
         <Menu.Trigger>Open</Menu.Trigger>
         <Menu.Content>
-          <Menu.CheckboxItem checked={false} onCheckedChange={onCheckedChange}>
+          <Menu.CheckboxItem checked={true} onCheckedChange={onCheckedChange}>
             Show toolbar
           </Menu.CheckboxItem>
+          <Menu.CheckboxItem checked={false}>
+            Show sidebar
+          </Menu.CheckboxItem>
         </Menu.Content>
       </Menu>
     );
 
     await waitFor(() => {
       expect(screen.getByText('Show toolbar')).toBeInTheDocument();
+      expect(screen.getByText('Show sidebar')).toBeInTheDocument();
     });
+
+    // Checked item should have a checkmark SVG
+    const checkedItem = screen.getByText('Show toolbar').closest('[role="menuitemcheckbox"]');
+    expect(checkedItem?.querySelector('svg')).toBeInTheDocument();
   });
 
   it('renders radio group items', async () => {
@@ -142,6 +149,122 @@ describe('Menu', () => {
     });
   });
 
+  describe('checked items', () => {
+    it('renders check indicator when checked={true}', async () => {
+      render(
+        <Menu defaultOpen>
+          <Menu.Trigger>Open</Menu.Trigger>
+          <Menu.Content>
+            <Menu.Item checked={true} onSelect={() => {}}>Grid</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Grid')).toBeInTheDocument();
+      });
+
+      const item = screen.getByText('Grid').closest('[role="menuitem"]');
+      expect(item?.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('reserves space but shows no icon when checked={false}', async () => {
+      render(
+        <Menu defaultOpen>
+          <Menu.Trigger>Open</Menu.Trigger>
+          <Menu.Content>
+            <Menu.Item checked={false} onSelect={() => {}}>List</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('List')).toBeInTheDocument();
+      });
+
+      const item = screen.getByText('List').closest('[role="menuitem"]');
+      // Should not have a checkmark SVG
+      expect(item?.querySelector('svg')).not.toBeInTheDocument();
+    });
+
+    it('does not render check indicator when checked is omitted', async () => {
+      const { container } = render(
+        <Menu defaultOpen>
+          <Menu.Trigger>Open</Menu.Trigger>
+          <Menu.Content>
+            <Menu.Item onSelect={() => {}}>Normal Item</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Normal Item')).toBeInTheDocument();
+      });
+
+      const item = screen.getByText('Normal Item').closest('[role="menuitem"]');
+      // Should not have any SVG or check indicator
+      expect(item?.querySelector('svg')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('submenu', () => {
+    function renderSubmenu(props: Partial<React.ComponentProps<typeof Menu>> = {}) {
+      return render(
+        <Menu {...props}>
+          <Menu.Trigger>Open Menu</Menu.Trigger>
+          <Menu.Content>
+            <Menu.Item onSelect={() => {}}>New File</Menu.Item>
+            <Menu.Submenu>
+              <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>
+              <Menu.Content side="right" align="start">
+                <Menu.Item onSelect={() => {}}>PNG</Menu.Item>
+                <Menu.Item onSelect={() => {}}>SVG</Menu.Item>
+              </Menu.Content>
+            </Menu.Submenu>
+          </Menu.Content>
+        </Menu>
+      );
+    }
+
+    it('renders submenu trigger', async () => {
+      const user = userEvent.setup();
+      renderSubmenu();
+
+      await user.click(screen.getByRole('button', { name: /open menu/i }));
+      await waitFor(() => {
+        expect(screen.getByText('Export As')).toBeInTheDocument();
+      });
+    });
+
+    it('opens submenu on click', async () => {
+      const user = userEvent.setup();
+      renderSubmenu();
+
+      await user.click(screen.getByRole('button', { name: /open menu/i }));
+      await waitFor(() => {
+        expect(screen.getByText('Export As')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Export As'));
+      await waitFor(() => {
+        expect(screen.getByText('PNG')).toBeInTheDocument();
+        expect(screen.getByText('SVG')).toBeInTheDocument();
+      });
+    });
+
+    it('has no accessibility violations', async () => {
+      const { container } = renderSubmenu({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Export As')).toBeInTheDocument();
+      });
+
+      await expectNoA11yViolations(container, {
+        disabledRules: ['aria-command-name'],
+      });
+    });
+  });
+
   describe('keyboard & focus', () => {
     /**
      * Opens the menu by clicking the trigger and waits for it to be present.

package/src/components/Menu/index.tsx

@@ -37,6 +37,8 @@ export interface MenuItemProps {
   className?: string;
   icon?: React.ReactNode;
   shortcut?: string;
+  /** When passed, renders a check indicator. `true` shows a checkmark, `false` reserves space. */
+  checked?: boolean;
 }
 
 export interface MenuCheckboxItemProps {
@@ -76,25 +78,39 @@ export interface MenuSeparatorProps {
   className?: string;
 }
 
+export interface MenuSubmenuProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface MenuSubmenuTriggerProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  icon?: React.ReactNode;
+}
+
 // ============================================
 // Icons
 // ============================================
 
-function CheckIcon() {
+function CheckmarkIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
+      width="14"
+      height="14"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="3"
+      strokeWidth={3}
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <polyline points="20 6 9 17 4 12" />
+      <path d="M5 13l4 4L19 7" />
     </svg>
   );
 }
@@ -187,7 +203,9 @@ function MenuItem({
   className,
   icon,
   shortcut,
+  checked,
 }: MenuItemProps) {
+  const hasChecked = checked !== undefined;
   const classes = [
     styles.item,
     danger && styles.itemDanger,
@@ -200,6 +218,11 @@ function MenuItem({
       onClick={onSelect}
       className={classes}
     >
+      {hasChecked && (
+        <span className={styles.checkIndicator}>
+          {checked ? <CheckmarkIcon /> : null}
+        </span>
+      )}
       {icon && <span className={styles.itemIcon}>{icon}</span>}
       <span className={styles.itemLabel}>{children}</span>
       {shortcut && <span className={styles.itemShortcut}>{shortcut}</span>}
@@ -209,26 +232,38 @@ function MenuItem({
 
 function MenuCheckboxItem({
   children,
-  checked,
+  checked: checkedProp,
   defaultChecked,
   onCheckedChange,
   disabled,
   className,
 }: MenuCheckboxItemProps) {
+  const isControlled = checkedProp !== undefined;
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+  const visualChecked = isControlled ? checkedProp : internalChecked;
+
+  const handleCheckedChange = React.useCallback(
+    (value: boolean) => {
+      if (!isControlled) setInternalChecked(value);
+      onCheckedChange?.(value);
+    },
+    [isControlled, onCheckedChange],
+  );
+
   const classes = [styles.item, styles.checkboxItem, className]
     .filter(Boolean)
     .join(' ');
 
   return (
     <BaseMenu.CheckboxItem
-      checked={checked}
+      checked={checkedProp}
       defaultChecked={defaultChecked}
-      onCheckedChange={onCheckedChange}
+      onCheckedChange={handleCheckedChange}
       disabled={disabled}
       className={classes}
     >
-      <span className={styles.itemIndicator}>
-        <CheckIcon />
+      <span className={styles.checkIndicator}>
+        {visualChecked ? <CheckmarkIcon /> : null}
       </span>
       <span className={styles.itemLabel}>{children}</span>
     </BaseMenu.CheckboxItem>
@@ -264,7 +299,7 @@ function MenuRadioItem({
 
   return (
     <BaseMenu.RadioItem value={value} disabled={disabled} className={classes}>
-      <span className={styles.itemIndicator}>
+      <span className={styles.radioIndicator}>
         <DotIcon />
       </span>
       <span className={styles.itemLabel}>{children}</span>
@@ -287,6 +322,41 @@ function MenuSeparator({ className }: MenuSeparatorProps) {
   return <BaseMenu.Separator className={classes} />;
 }
 
+function MenuSubmenu({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+}: MenuSubmenuProps) {
+  return (
+    <BaseMenu.SubmenuRoot
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange as any}
+    >
+      {children}
+    </BaseMenu.SubmenuRoot>
+  );
+}
+
+function MenuSubmenuTrigger({
+  children,
+  disabled,
+  className,
+  icon,
+}: MenuSubmenuTriggerProps) {
+  const classes = [styles.item, styles.submenuTrigger, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <BaseMenu.SubmenuTrigger disabled={disabled} className={classes}>
+      {icon && <span className={styles.itemIcon}>{icon}</span>}
+      <span className={styles.itemLabel}>{children}</span>
+    </BaseMenu.SubmenuTrigger>
+  );
+}
+
 // ============================================
 // Export compound component
 // ============================================
@@ -301,6 +371,8 @@ export const Menu = Object.assign(MenuRoot, {
   Group: MenuGroup,
   GroupLabel: MenuGroupLabel,
   Separator: MenuSeparator,
+  Submenu: MenuSubmenu,
+  SubmenuTrigger: MenuSubmenuTrigger,
 });
 
 // Re-export individual components
@@ -315,4 +387,6 @@ export {
   MenuGroup,
   MenuGroupLabel,
   MenuSeparator,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
 };

package/src/components/Message/Message.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Message } from '.';
 
 export default defineFragment({

package/src/components/Message/Message.module.scss

@@ -36,7 +36,7 @@
 
   .content {
     background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
+    color: var(--fui-text-inverse, $fui-text-inverse);
   }
 }
 
@@ -68,6 +68,7 @@
   .content {
     background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
     border: 1px solid var(--fui-color-danger, $fui-color-danger);
+    color: var(--fui-color-danger-text, $fui-color-danger-text);
   }
 }
 

package/src/components/NavigationMenu/NavigationMenu.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { NavigationMenu } from '.';
 
 export default defineFragment({

package/src/components/Popover/Popover.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Popover } from '.';
 import { Button } from '../Button';
 import { Input } from '../Input';

package/src/components/Progress/Progress.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Progress, CircularProgress } from '.';
 
 export default defineFragment({

package/src/components/Prompt/Prompt.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Prompt } from '.';
 
 export default defineFragment({

package/src/components/RadioGroup/RadioGroup.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { RadioGroup } from '.';
 
 export default defineFragment({

package/src/components/ScrollArea/ScrollArea.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ScrollArea } from '.';
 
 const tags = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6', 'Tag 7', 'Tag 8', 'Tag 9', 'Tag 10', 'Tag 11', 'Tag 12', 'Tag 13', 'Tag 14', 'Tag 15'];

package/src/components/Select/Select.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Select } from '.';
 
 // Stateful wrapper for interactive demos

package/src/components/Separator/Separator.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Separator } from '.';
 
 export default defineFragment({

package/src/components/Sidebar/Sidebar.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Sidebar, SidebarProvider, useSidebar } from '.';
 import { Button } from '../Button';
 
@@ -81,7 +81,7 @@ const mainContentStyle: React.CSSProperties = {
 };
 
 const demoContainerStyle: React.CSSProperties = {
-  height: '400px',
+  minHeight: '100vh',
   display: 'flex',
   width: '100%',
 };

package/src/components/Skeleton/Skeleton.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Skeleton } from '.';
 
 export default defineFragment({

package/src/components/Slider/Slider.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Slider } from '.';
 
 export default defineFragment({

package/src/components/Stack/Stack.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Stack } from '.';
 import { Button } from '../Button';
 import { Badge } from '../Badge';

package/src/components/Table/Table.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Table, createColumns } from '.';
 import { Badge } from '../Badge';
 

package/src/components/TableOfContents/TableOfContents.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { TableOfContents } from '.';
 
 export default defineFragment({

package/src/components/Tabs/Tabs.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Tabs } from '.';
 
 export default defineFragment({

package/src/components/Text/Text.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Text } from '.';
 
 export default defineFragment({