@ai-matrx/design-system 0.86.334 → 0.86.336

package/dist/menu-look.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/menu-look.tsx"],"sourcesContent":["\"use client\";\n/**\n * `@ai-matrx/design-system/menu-look` — THE ONE MENU LOOK (Arman, 2026-10-23: the header \"…\", every\n * crumb dropdown and every Alchemy dropdown are \"the IDENTICAL dropdown that I use for Alchemy for size\n * and style\" — the right-click menu).\n *\n * Two halves, one look:\n *  - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,\n *    used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);\n *  - `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /\n *    `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator` / `MenuLookSearch`: the same panel and rows on the Radix\n *    dropdown (keyboard, typeahead, focus return, collision padding), used by Alchemy's dropdowns and the\n *    frame's \"…\" and crumb menus.\n * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,\n * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.\n *\n * ONE LEFT EDGE (Arman, 2026-10-23: \"get rid of the HORRIBLE and ugly indentation\"): a row without a\n * glyph draws no icon column, the current row is marked with a check at its END (`current`), and the\n * search is the menu's own header row whose text starts where every row's text starts.\n */\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { DropdownMenuContent, DropdownMenuSubContent, DropdownMenuSubTrigger } from \"./dropdown-menu\";\nimport { RadixCheckIcon } from \"./icons\";\n\n/** The look's measurements (what `menu-look.css` draws), for tests and hosts that size around a menu. */\nexport const MENU_LOOK = {\n  width: 280,\n  largeWidth: 360,\n  rowHeight: 30,\n  fontSize: 13,\n  lineHeight: 1.25,\n  icon: 16,\n  rowPaddingY: 4,\n  rowPaddingX: 8,\n  radius: 10,\n} as const;\n\n/** The look's class names — the ONLY classes a menu part wears. */\nexport const MENU_LOOK_CLASS = {\n  panel: \"cm-menu\",\n  item: \"cm-item\",\n  iconSlot: \"cm-icon-slot\",\n  icon: \"cm-icon\",\n  text: \"cm-text\",\n  label: \"cm-label\",\n  hint: \"cm-hint\",\n  current: \"cm-current\",\n  search: \"cm-search\",\n  trail: \"cm-trail\",\n  shortcut: \"cm-shortcut\",\n  divider: \"cm-divider\",\n  sectionLabel: \"cm-section-label\",\n  danger: \"cm-danger\",\n  dimmed: \"cm-dimmed\",\n} as const;\n\nexport type MenuLookSize = \"standard\" | \"large\";\nexport type MenuLookDensity = \"comfortable\" | \"compact\";\n\n/** The 16px icon column of a row that has a glyph (an empty slot draws nothing: no reserved gutter). */\nexport function MenuLookIconSlot({ children }: { children?: React.ReactNode }): React.ReactElement {\n  return <span className={MENU_LOOK_CLASS.iconSlot}>{children}</span>;\n}\n\nexport interface MenuLookRowBodyProps {\n  /** The glyph (any 16px svg; the slot sizes it). Omitted → no icon column; the text starts the row. */\n  icon?: React.ReactNode | undefined;\n  label: React.ReactNode;\n  /** A muted second line under the label. */\n  description?: React.ReactNode | undefined;\n  /** A muted end-of-row hint (a trail, a shortcut word). */\n  trail?: React.ReactNode | undefined;\n  /** The row the person is on now: medium weight and a check at the row's end (never a left gutter). */\n  current?: boolean | undefined;\n}\n\n/** The inside of a row: icon (when given), label (with an optional second line), end hint, current check. */\nexport function MenuLookRowBody({ icon, label, description, trail, current }: MenuLookRowBodyProps): React.ReactElement {\n  return (\n    <>\n      {icon ? <MenuLookIconSlot>{icon}</MenuLookIconSlot> : null}\n      <span className={MENU_LOOK_CLASS.text}>\n        <span className={MENU_LOOK_CLASS.label}>{label}</span>\n        {description ? <span className={MENU_LOOK_CLASS.hint}>{description}</span> : null}\n      </span>\n      {trail ? <span className={MENU_LOOK_CLASS.trail}>{trail}</span> : null}\n      {current ? <RadixCheckIcon className={MENU_LOOK_CLASS.current} aria-hidden=\"true\" data-menu-current-mark=\"\" /> : null}\n    </>\n  );\n}\n\n/** A row's classes: the look's row, plus its danger / dimmed marks. */\nexport function menuLookItemClass({ destructive, dimmed }: { destructive?: boolean | undefined; dimmed?: boolean | undefined } = {}): string {\n  return `${MENU_LOOK_CLASS.item}${destructive ? ` ${MENU_LOOK_CLASS.danger}` : \"\"}${dimmed ? ` ${MENU_LOOK_CLASS.dimmed}` : \"\"}`;\n}\n\ntype ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookContentProps extends ContentProps {\n  /** \"standard\" (280px, the right-click menu) or \"large\" (360px, 36px rows). */\n  size?: MenuLookSize | undefined;\n  density?: MenuLookDensity | undefined;\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** The menu's panel on the Radix dropdown (portalled, capped at the room Radix measured, scrolls past it). */\nexport const MenuLookContent = React.forwardRef<HTMLDivElement, MenuLookContentProps>(function MenuLookContent(\n  { size = \"standard\", density = \"comfortable\", ...props },\n  ref,\n) {\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      surface=\"solid\"\n      data-menu-look=\"\"\n      data-size={size}\n      data-density={density}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype SubContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookSubContentProps extends SubContentProps {\n  size?: MenuLookSize | undefined;\n  density?: MenuLookDensity | undefined;\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A submenu's panel: the same panel, as wide as the menu it opens from. */\nexport const MenuLookSubContent = React.forwardRef<HTMLDivElement, MenuLookSubContentProps>(function MenuLookSubContent(\n  { size = \"standard\", density = \"comfortable\", ...props },\n  ref,\n) {\n  return (\n    <DropdownMenuSubContent\n      ref={ref}\n      surface=\"solid\"\n      data-menu-look=\"\"\n      data-size={size}\n      data-density={density}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype ItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps {\n  destructive?: boolean | undefined;\n  /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still focusable. */\n  dimmed?: boolean | undefined;\n  /** A real link: the row is an `<a>` (a modified click keeps the browser's link behaviour). */\n  href?: string | undefined;\n  target?: string | undefined;\n  /** Props for the `<a>` (aria-current, title, onClick). */\n  linkProps?: undefined | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\" | \"target\" | \"className\" | \"children\">;\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** One row: icon, label (+ optional second line), optional end hint; a link when given `href`. */\nexport const MenuLookItem = React.forwardRef<HTMLDivElement, MenuLookItemProps>(function MenuLookItem(\n  { icon, label, description, trail, current, destructive, dimmed, href, target, linkProps, ...props },\n  ref,\n) {\n  const className = menuLookItemClass({ destructive, dimmed });\n  const body = <MenuLookRowBody icon={icon} label={label} description={description} trail={trail} current={current} />;\n  const mark = current ? { \"data-current\": \"\" } : {};\n  if (href) {\n    return (\n      <DropdownMenuPrimitive.Item ref={ref} asChild {...props} {...mark} className={className}>\n        <a href={href} target={target} rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined} {...linkProps}>\n          {body}\n        </a>\n      </DropdownMenuPrimitive.Item>\n    );\n  }\n  return (\n    <DropdownMenuPrimitive.Item ref={ref} {...props} {...mark} className={className}>\n      {body}\n    </DropdownMenuPrimitive.Item>\n  );\n});\n\ntype SubTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubTrigger>, \"className\" | \"children\" | \"inset\">;\n\nexport interface MenuLookSubTriggerProps extends SubTriggerProps, MenuLookRowBodyProps {\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A row that opens a submenu (the chevron is the dropdown's own). */\nexport const MenuLookSubTrigger = React.forwardRef<HTMLDivElement, MenuLookSubTriggerProps>(function MenuLookSubTrigger(\n  { icon, label, description, trail, ...props },\n  ref,\n) {\n  return (\n    <DropdownMenuSubTrigger ref={ref} {...props} className={MENU_LOOK_CLASS.item}>\n      <MenuLookRowBody icon={icon} label={label} description={description} trail={trail} />\n    </DropdownMenuSubTrigger>\n  );\n});\n\ntype CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps {\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon — a\n * toggle keeps its column either way, so switching it never moves its label. */\nexport const MenuLookCheckboxItem = React.forwardRef<HTMLDivElement, MenuLookCheckboxItemProps>(function MenuLookCheckboxItem(\n  { icon, label, description, trail, checked, ...props },\n  ref,\n) {\n  const on = checked === true;\n  return (\n    <DropdownMenuPrimitive.CheckboxItem ref={ref} {...(checked === undefined ? {} : { checked })} {...props} className={MENU_LOOK_CLASS.item}>\n      <MenuLookRowBody icon={on ? <RadixCheckIcon className={MENU_LOOK_CLASS.icon} /> : (icon ?? <span className={MENU_LOOK_CLASS.icon} aria-hidden=\"true\" />)} label={label} description={description} trail={trail} />\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n});\n\n/** A section heading (\"Copy\", \"Brands\", \"Pages\"). */\nexport const MenuLookLabel = React.forwardRef<\n  HTMLDivElement,\n  Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, \"className\">\n>(function MenuLookLabel(props, ref) {\n  return <DropdownMenuPrimitive.Label ref={ref} {...props} className={MENU_LOOK_CLASS.sectionLabel} />;\n});\n\n/** The line between sections. */\nexport const MenuLookSeparator = React.forwardRef<\n  HTMLDivElement,\n  Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, \"className\">\n>(function MenuLookSeparator(props, ref) {\n  return <DropdownMenuPrimitive.Separator ref={ref} {...props} className={MENU_LOOK_CLASS.divider} />;\n});\n\nexport interface MenuLookSearchProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"className\" | \"style\" | \"size\" | \"type\"> {\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/**\n * The menu's search: its own header row (full-bleed, a hairline under it, held at the top while the\n * list scrolls) whose text starts on the rows' left edge. The host owns the value and its keys (stop\n * propagation on letters so the menu's type-ahead never takes them).\n */\nexport const MenuLookSearch = React.forwardRef<HTMLInputElement, MenuLookSearchProps>(function MenuLookSearch(\n  { placeholder = \"Search\", ...props },\n  ref,\n) {\n  return (\n    <div className={MENU_LOOK_CLASS.search} data-menu-look-search=\"\">\n      <input\n        ref={ref}\n        type=\"search\"\n        autoComplete=\"off\"\n        spellCheck={false}\n        placeholder={placeholder}\n        aria-label={props[\"aria-label\"] ?? placeholder}\n        {...props}\n      />\n    </div>\n  );\n});\n"],"mappings":"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","names":["MenuLookContent","MenuLookSubContent","MenuLookItem","MenuLookSubTrigger","MenuLookCheckboxItem","MenuLookLabel","MenuLookSeparator","MenuLookSearch"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}