rift-ds 1.0.0

package/components/DropdownMenu/DropdownMenu.css

@@ -0,0 +1,301 @@
+/* ============================================
+   DROPDOWN MENU COMPONENT
+   Contextual menu with sections, sub-menus,
+   keyboard shortcuts, and inset-gap hover.
+   Tokens aligned to Figma spec.
+   ============================================ */
+
+.ds-dropdown-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-dropdown-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ds-dropdown-menu__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-200);
+}
+
+/* ============================================
+   PANEL
+   The floating menu container
+   ============================================ */
+
+.ds-dropdown-menu__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  min-width: 200px;
+  margin-top: var(--gap-050); /* 2px offset from trigger */
+
+  /* Appearance — Figma: page/primary bg, input/border/primary, radius/md */
+  background: var(--color-bg-page-primary);
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  box-shadow: var(--shadow-floating);
+
+  /* Inset gap — Figma: padding/xxs (4px) all sides */
+  padding: var(--padding-100);
+
+  /* Reset list */
+  list-style: none;
+  margin-block: 0;
+
+  /* Animation */
+  animation: ds-dropdown-menu-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+.ds-dropdown-menu__panel--align-end {
+  left: auto;
+  right: 0;
+}
+
+/* Compact items: paragraph-sm-em (14/20), padding xs sm-md (6px 12px), radius-sm (8px) */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__item {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+  border-radius: var(--radius-200); /* 8px */
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+/* Compact icons: 20px (vs 24px default) */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__item-icon {
+  --icon-size: var(--icon-size-500);
+}
+
+/* Compact submenu chevron: 20px */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__submenu-icon {
+  --icon-size: var(--icon-size-500);
+}
+
+/* Compact group label: same padding as compact items so heights match */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__group-label {
+  min-height: auto;
+  padding: var(--padding-150) var(--padding-300); /* matches compact item padding */
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+/* Compact separator margin matches compact item padding */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__separator {
+  margin: var(--padding-100) var(--padding-300);
+}
+
+/* Compact shortcuts keep the base --font-paragraph-sm-* size — the scale
+   has no smaller step. */
+
+/* ============================================
+   SUB-MENU PANEL
+   ============================================ */
+
+.ds-dropdown-menu__submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin-left: var(--gap-050); /* 4px offset from parent */
+}
+
+/* ============================================
+   MENU ITEM
+   Figma: Button/secondary internally —
+   padding/sm (8px) vertical, padding/md (16px) horizontal,
+   radius/md (12px), paragraph-em typography.
+   ============================================ */
+
+.ds-dropdown-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-400); /* 16px between label and shortcut */
+  padding: var(--padding-200) var(--padding-400); /* Figma: 8px 16px */
+  border-radius: var(--radius-300); /* Figma: 12px */
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  list-style: none;
+
+  /* Typography — paragraph em (medium weight, matches Figma Button secondary) */
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-action-passive-text);
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-dropdown-menu__item:hover,
+.ds-dropdown-menu__item--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* ============================================
+   DISABLED ITEM
+   ============================================ */
+
+.ds-dropdown-menu__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-dropdown-menu__item--disabled:hover,
+.ds-dropdown-menu__item--disabled.ds-dropdown-menu__item--focused {
+  background-color: transparent;
+}
+
+/* ============================================
+   ITEM LABEL (text + optional icon)
+   ============================================ */
+
+.ds-dropdown-menu__item-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200); /* Figma: 8px between icon and text */
+  line-height: 1;
+}
+
+/* Figma: icons are 24px within menu items */
+.ds-dropdown-menu__item-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-secondary);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* ============================================
+   KEYBOARD SHORTCUT
+   ============================================ */
+
+.ds-dropdown-menu__shortcut {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   SUB-MENU INDICATOR
+   Figma: 24px chevron icon
+   ============================================ */
+
+.ds-dropdown-menu__submenu-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-text-tertiary);
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.ds-dropdown-menu__separator {
+  height: 1px;
+  background: var(--color-input-border-primary);
+  margin: var(--padding-100) var(--padding-400);
+  list-style: none;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.ds-dropdown-menu__group {
+  list-style: none;
+}
+
+/* Figma: section label is paragraph-em at text/tertiary,
+   40px height container, padding-left aligns with item text */
+.ds-dropdown-menu__group-label {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-tertiary);
+  padding-left: var(--padding-400);
+  padding-right: var(--padding-400);
+  user-select: none;
+}
+
+.ds-dropdown-menu__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   HAS-SUBMENU ITEM
+   ============================================ */
+
+.ds-dropdown-menu__item--has-submenu {
+  padding-right: var(--padding-300); /* Slightly less right padding for chevron */
+}
+
+/* ============================================
+   DESTRUCTIVE ITEM
+   Red text/icon for dangerous actions (delete, remove…)
+   ============================================ */
+
+.ds-dropdown-menu__item--destructive {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-dropdown-menu__item--destructive .ds-dropdown-menu__item-icon {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-dropdown-menu__item--destructive .ds-dropdown-menu__shortcut {
+  color: var(--color-core-accent-coral);
+  opacity: 0.7;
+}
+
+.ds-dropdown-menu__item--destructive:hover,
+.ds-dropdown-menu__item--destructive.ds-dropdown-menu__item--focused {
+  background-color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   APPEAR ANIMATION
+   ============================================ */
+
+@keyframes ds-dropdown-menu-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export interface DropdownMenuItem {
+    type?: 'item';
+    /** Display label */
+    label: string;
+    /** Keyboard shortcut hint (e.g. "⇧ ⌘ P") */
+    shortcut?: string;
+    /** Item icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Destructive / danger styling (red text) for delete, remove, etc. */
+    destructive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Nested sub-menu items */
+    children?: DropdownMenuEntry[];
+}
+export interface DropdownMenuSeparator {
+    type: 'separator';
+}
+export interface DropdownMenuGroup {
+    type: 'group';
+    /** Section heading */
+    label: string;
+    /** Items within the group */
+    items: DropdownMenuEntry[];
+}
+export type DropdownMenuEntry = DropdownMenuItem | DropdownMenuSeparator | DropdownMenuGroup;
+export interface DropdownMenuProps {
+    /** Trigger element that opens the menu */
+    trigger: React.ReactNode;
+    /** Menu entries (items, groups, separators) */
+    items: DropdownMenuEntry[];
+    /** Horizontal alignment of the panel */
+    align?: 'start' | 'end';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DropdownMenu: ({ trigger, items, align, size, className, }: DropdownMenuProps) => React.JSX.Element;