@usefragments/ui 1.0.0

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

@@ -0,0 +1,215 @@
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+// Local component tokens — arrow size shared with Popover/Tooltip
+$fui-arrow-size: 10px !default;
+
+// Positioner — z-index must exceed Dialog positioner (51)
+.positioner {
+  z-index: 52;
+  outline: none;
+}
+
+// Popup container
+.popup {
+  @include surface-elevated;
+  @include popup-container;
+
+  list-style: none;
+  margin: 0;
+  min-width: 12rem;
+
+  // Animation
+  opacity: 0;
+  transform: scale(0.95);
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity var(--fui-transition-fast, $fui-transition-fast),
+    transform var(--fui-transition-fast, $fui-transition-fast);
+
+  &[data-open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+// Viewport — enables content transition animations
+.viewport {
+  overflow: hidden;
+  transition: height var(--fui-transition-fast, $fui-transition-fast);
+}
+
+// Menu item (shared base)
+.item {
+  @include popup-item;
+
+  // Base UI sets [data-highlighted] on pointer-hover AND keyboard nav → one indicator.
+  &[data-highlighted] {
+    @include popup-item-highlight;
+  }
+
+  &[data-disabled] {
+    @include popup-item-disabled;
+  }
+}
+
+// Danger variant for destructive actions
+.itemDanger {
+  color: var(--fui-color-danger-text, $fui-color-danger-text);
+
+  &[data-highlighted] {
+    background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
+    color: var(--fui-color-danger-text, $fui-color-danger-text);
+  }
+}
+
+// Item with icon
+.itemIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  .itemDanger & {
+    color: var(--fui-color-danger-text, $fui-color-danger-text);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+// Item label (main text)
+.itemLabel {
+  flex: 1;
+}
+
+// Item shortcut (keyboard shortcut hint)
+.itemShortcut {
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  margin-left: auto;
+}
+
+// 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;
+    height: 0.75rem;
+  }
+}
+
+// Radio item states
+.radioItem {
+  &[data-checked] .radioIndicator {
+    visibility: visible;
+    color: var(--fui-color-accent, $fui-color-accent);
+  }
+}
+
+// Separator
+.separator {
+  height: 1px;
+  margin: var(--fui-space-1, $fui-space-1) 0;
+  background-color: var(--fui-border, $fui-border);
+}
+
+// Group container
+.group {
+  // No specific styles needed
+}
+
+// Group label
+.groupLabel {
+  @include popup-group-label;
+}
+
+// Arrow
+.arrow {
+  width: $fui-arrow-size;
+  height: $fui-arrow-size;
+  transform: rotate(45deg);
+  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
+  border: 1px solid var(--fui-border, $fui-border);
+
+  &[data-side="top"] {
+    border-top: none;
+    border-left: none;
+  }
+
+  &[data-side="bottom"] {
+    border-bottom: none;
+    border-right: none;
+  }
+
+  &[data-side="left"] {
+    border-left: none;
+    border-bottom: none;
+  }
+
+  &[data-side="right"] {
+    border-right: none;
+    border-top: none;
+  }
+}
+
+// Submenu trigger (has arrow on right)
+.submenuTrigger {
+  &::after {
+    content: "";
+    margin-left: auto;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 0 4px 6px;
+    border-color: transparent transparent transparent var(--fui-text-secondary, $fui-text-secondary);
+  }
+}
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .popup {
+    transition: none;
+    transform: none;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: none;
+    }
+  }
+}

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu } from '.';
+
+/**
+ * Dropdown menu for actions and commands. Compose with `Menu.Trigger`,
+ * `Menu.Content`, `Menu.Item`, and friends. Supports submenus, check items,
+ * radio groups, and keyboard shortcuts.
+ */
+const meta = {
+  title: 'Feedback/Menu',
+  component: Menu,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Dropdown menu for actions and commands with keyboard navigation.',
+      },
+    },
+  },
+  argTypes: {
+    modal: { control: 'boolean' },
+    defaultOpen: { control: 'boolean' },
+  },
+  args: {
+    modal: true,
+    children: (
+      <>
+        <Menu.Trigger>Actions</Menu.Trigger>
+        <Menu.Content>
+          <Menu.Item onSelect={() => {}}>Edit</Menu.Item>
+          <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>
+        </Menu.Content>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <Menu.Trigger>Actions</Menu.Trigger>
+      <Menu.Content>
+        <Menu.Item onSelect={() => {}}>Edit</Menu.Item>
+        <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>
+        <Menu.Separator />
+        <Menu.Item danger onSelect={() => {}}>
+          Delete
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
+  ),
+};
+
+export const WithShortcuts: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <Menu.Trigger>Edit</Menu.Trigger>
+      <Menu.Content>
+        <Menu.Item shortcut="Ctrl+Z" onSelect={() => {}}>
+          Undo
+        </Menu.Item>
+        <Menu.Item shortcut="Ctrl+Y" onSelect={() => {}}>
+          Redo
+        </Menu.Item>
+        <Menu.Separator />
+        <Menu.Item shortcut="Ctrl+C" onSelect={() => {}}>
+          Copy
+        </Menu.Item>
+        <Menu.Item shortcut="Ctrl+V" onSelect={() => {}}>
+          Paste
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
+  ),
+};
+
+export const WithGroups: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <Menu.Trigger>Options</Menu.Trigger>
+      <Menu.Content>
+        <Menu.Group>
+          <Menu.GroupLabel>View</Menu.GroupLabel>
+          <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>
+          <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>
+        </Menu.Group>
+        <Menu.Separator />
+        <Menu.Group>
+          <Menu.GroupLabel>Layout</Menu.GroupLabel>
+          <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>
+          <Menu.Item onSelect={() => {}}>List View</Menu.Item>
+        </Menu.Group>
+      </Menu.Content>
+    </Menu>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <Menu.Trigger>Display</Menu.Trigger>
+      <Menu.Content>
+        <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>
+        <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>
+        <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>
+      </Menu.Content>
+    </Menu>
+  ),
+};